HTML代码:
<table class="table table-bordered table-list table-striped no-margin-bottom"> <thead> <tr> <th>{{'column-name' | translate}}</th> <th width="100">{{'primary-key' | translate}}</th> <th width="100">{{'required' | translate}}</th> <th width="100"> <md-checkbox class="no-margin-bottom" aria-label="checked" ng-checked="table.AllColumnChecked"//设置全选按钮初始状态(双向绑定) ng-click="$ctrl.checkedAllColumn(table)"></md-checkbox> {{'select-all' | translate}} </th> </tr> </thead> <tbody> <tr ng-repeat="column in table.Table.ListColumn | orderBy :'DisplayOrder'"> <td>{{column | columnTranslateFilter}}</td> <td><span ng-if="column.IsPrimaryKey">{{'true' | translate}}</span></td> <td><span ng-if="column.IsRequired">{{'true' | translate}}</span></td> <td> <md-checkbox class="no-margin-bottom" aria-label="checked" ng-checked="column.checked" ng-disabled="column.IsPrimaryKey" ng-click="$ctrl.checkedColumn(table,column)"></md-checkbox> </td> </tr> </tbody> </table>
js代码:
self.checkedAllColumn = function (table) { table.AllColumnChecked = !table.AllColumnChecked; if (table.AllColumnChecked) { table.Table.ListColumn.forEach(function (col) { col.checked = true; }) table.ListColumn = $filter('orderBy')(table.Table.ListColumn, 'DisplayOrder'//排序条件); } else { table.Table.ListColumn.forEach(function (col) { col.checked = false; }) table.ListColumn = []; } };
全选:点击全选按钮时(checkedAllColumn),if语句中的条件变为true,则筛选所有列选项(table.Table.ListColumn)并更改状态为选中状态(col.checked = true;);
取消全选时,if语句中的条件变为false,则跳转到else筛选所有列选项并取消选中状态;
orderBy排序:js中$filter('oederBy')获取所有列选项并根据排序条件进行排序;html中用| orderBy :'排序条件'获取排序列表;
ng-checked="table.AllColumnChecked"中table需要在<div>中用ng-repeat定义;