편집 및 삭제 기능을 구현하기 위해 단일 클릭 행 선택을 지원하는 Angularjs+bootstrap+table 다중 선택(모두 선택) 코드 예제
- 黄舟원래의
- 2017-03-27 14:36:202268검색
이 글에서는 Angularjs bootstrap 테이블 다중 선택(전체 선택)을 주로 소개합니다. 단일 클릭 행 선택을 지원하여 편집 및 삭제 기능을 구현합니다. 필요한 친구들은
의 최종 효과를 참조할 수 있습니다:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<link rel="stylesheet" href="style.css" rel="external nofollow" >
<script src="script.js"></script>
</head>
<body ng-app="routerApp">
<p ng-controller="zdTable">
<table class="table table-bordered" >
<thead>
<tr>
<th>
<input type="checkbox" ng-model="selectAll" ng-change="changeAll()" /> 选择</th>
<th>序号</th>
<th>用户</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in datas" ng-init="outerIndex = $index" ng-click="changeCurrents(row, $event)">
<td><input type="checkbox" ng-model="row.checked" ng-click="changeCurrent(row, $event)" /></td>
<td ng-bind="outerIndex+1"></td>
<td ng-repeat="tddata in row | filterTable">
{{tddata}}
</td>
<td>
<button type="button" class="btn btn-info" ng-click="zdTableEdit(row, $event)">编辑</button>
<button type="button" class="btn btn-danger" ng-click="zdTableRemove(row, $event)">删除</button>
</td>
</tr>
</tbody>
</table>
<p>已选数量：{{count}}</p>
<p>已选对象：{{selectData}}</p>
</p>
</body>
</html>script.js
으아아아위 내용은 편집 및 삭제 기능을 구현하기 위해 단일 클릭 행 선택을 지원하는 Angularjs+bootstrap+table 다중 선택(모두 선택) 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.