将 angular UI-GRID selection RowButton 替换为复选框

Question

我需要用常规复选框替换 UI 网格选择 header 内容，而不是默认的“确定”按钮。我能够插入复选框，但我无法根据列 header 选中的复选框来控制行复选框值。要求：选中header列复选框时，应选中所有行复选框。当取消选中行复选框时，应取消选中列 header 复选框。

Select/unselect 复选框有效，但我应该能够根据列 header 复选框控制行复选框。

我正在为这里的范围而苦苦挣扎。任何 help/suggestion 表示赞赏。

笨蛋Link：http://plnkr.co/edit/Ji7gLbfQTohnEj04mYFM?p=preview

 $templateCache.put('ui-grid/selectionRowHeaderButtons',
    "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\"><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"rowSelected\" ng-click=\"grid.appScope.clickConditionRow(rowSelected) && selectButtonClick(row, $event)\">&nbsp;</div>"
  );

Answer 1

这是修复方法http://plnkr.co/edit/aBmgnNXQ4fL0npJHzsfG?p=preview

页眉复选框模板：

<div class="ui-grid-selection-row-header-buttons" ng-class="{'ui-grid-all-selected': grid.selection.selectAll}" ng-if="grid.options.enableSelectAll"><input style="margin: 0; vertical-align: middle" type="checkbox" ng-model="grid.selection.selectAll" ng-click="grid.selection.selectAll=!grid.selection.selectAll;headerButtonClick($event)"></div>

行复选框模板：

<div class="ui-grid-selection-row-header-buttons" ng-class="{'ui-grid-row-selected': row.isSelected}" ><input style="margin: 0; vertical-align: middle" type="checkbox" ng-model="row.isSelected" ng-click="row.isSelected=!row.isSelected;selectButtonClick(row, $event)">&nbsp;</div>

将 angular UI-GRID selection RowButton 替换为复选框

Replace angular UI-GRID selection RowButton with checkbox

checkbox

angularjs

angular-ui-grid