Question

我想知道是否有办法让第一列的网格为空，除了必须包含“Select All”复选框的标题。

使用此代码我的所有列都已填满复选框，但设置为“showSelectionCheckbox:false”并同时选中“Select All”复选框已隐藏。

有什么方法可以做到这一点吗？

    <script type="text/javascript">
    var app = angular.module('myApp', ['ngGrid']);
    app.controller('MyCtrl', function($scope) {
    $scope.mySelections = [];
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.gridOptions = { 
      data: 'myData',
      checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
      showSelectionCheckbox: true,
      selectWithCheckboxOnly: false,
      selectedItems: $scope.mySelections,
      multiSelect: true
    };
    });
   </script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
        <div class="selectedItems">{{mySelections}}</div>
    </body>
</html>

非常感谢！

Answer 1

添加checkboxCellTemplate并将input的样式设置为display:none

    app.controller('MyCtrl', function($scope) {
      $scope.mySelections = [];
        $scope.myData = [{name: "Moroni", age: 50},
                         {name: "Tiancum", age: 43},
                         {name: "Jacob", age: 27},
                         {name: "Nephi", age: 29},
                         {name: "Enos", age: 34}];


        var ct_nocheck="<div class=\"ngSelectionCell\"><input style=\"display:none\" tabindex=\"-1\" class=\"ngSelectionCheckbox\" type=\"checkbox\" ng-checked=\"row.selected\" /></div>";                     

        $scope.gridOptions = { 
          data: 'myData',
          checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
          showSelectionCheckbox: true,
          selectWithCheckboxOnly: false,
          checkboxCellTemplate:ct_nocheck,
          selectedItems: $scope.mySelections,
          multiSelect: true
        };

    });

这是Plunker

另一种方法是添加：

.ngSelectionCheckbox{
  display:none;
}

到你的CSS。

这是另一个Plunker

带有“全选”复选框的ng-grid，而不显示每行的复选框

1 个答案: