Question

我以成角度的方式渲染DataTable，我在每行添加了一个复选框，并在顶部添加了一个select all复选框。问题是，例如，如果我选中select all，它将检查所有行，则使用搜索框过滤行。我该怎么做，以便在单击select all复选框时，它仅在过滤后检查可见行。

HTML

<table id="tblAvailable" datatable="ng" dt-options="mainCtrl.dtOptions" dt-instance="mainCtrl.dtInstance" dt-column-defs="mainCtrl.dtColumnDefs" class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Ref. #</th>
            <th>Type</th>
            <th>Category</th>
            <th>Applied Amount</th>
            <th>New Amount</th>
            <th><input type="checkbox" ng-model="mainCtrl.selectAll" ng-click="mainCtrl.toggleAll(mainCtrl.selectAll)" ng-change="mainCtrl.update()"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="Item in mainCtrl.newLineDetails" ng-if="Item.Amount > 0">
            <td>{{Item.Id}}</td>
            <td>{{Item.Type.Name}}</td>
            <td>{{Item.Category.Name}}</td>
            <td>{{Item.Amount | number:2}}</td>
            <td><input type="number" ng-disabled="Item.isSelected == false" id="Amount" name="Amount" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="Item.Amount" ng-min="1" ng-max="Item.Amount" ng-required="Item.isSelected == true" ng-change="mainCtrl.updateForFreeUps()"/></td>
            <td><input type="checkbox" ng-model="Item.isSelected" ng-change="mainCtrl.toggleOne(Item.Id)"></td>
        </tr>
    </tbody>
</table>

Ctrl

self.toggleAll = function(selectAll) {
    angular.forEach(self.newLineDetails, function (value, index) {
        self.newLineDetails[index]["isSelected"] = selectAll;
        if (selectAll == false) {
            self.newLineDetails[index]["Amount"] = null;
        }
    })

}
self.toggleOne = function (Id) {
    for (var i = 0, len = self.newLineDetails.length; i < len; i++) {
        if (self.newLineDetails[i]["Id"] == Id) {
            self.newLineDetails[i]["Amount"] = null;
            self.selectAll = false;
            self.update();
            return;
        }
    }
    self.selectAll = true;
}

Answer 1

您必须通过DataTables API。 DT从“影子表”中删除并注入DOM节点，因此仅操作DOM才具有明显的（不是真实的）效果，直到下一次重绘为止。幸运的是，您已经实现了dtInstance。

从1.10.6开始，迭代行，列或单元格最方便的方法是every方法。看到这个笨蛋-> http://plnkr.co/edit/NOP5u4PUcwVOBFUtBkBi?p=preview

$scope.$watch('settings.selectAll', function(newVal, oldVal) {
  if (newVal == oldVal) return
  var api = $scope.dtInstance.DataTable;
  api.rows({ search:'applied' }).every(function() {
    api.cell({ row:this.index(), column:0 })
     .nodes()
     .to$()
     .find('input')
     .prop('checked', $scope.settings.selectAll);
  })
  $scope.dtInstance.DataTable.draw()
})

此处复选框位于第0列；该代码可以翻译成

遍历所有行
获取第一列
转换为jQuery实例
找到<input>
更新checked状态

关于您的selectAll复选框的一些说明：

最好将对象用作ng-model，在示例中，我使用了settings.selectAll文字
ng-click不适用于复选框，如果您确实要使用指令，请仅使用ng-change
由于您使用的是ng-model，因此您可以$watch来调用mainCtrl.toggleAll(mainCtrl.selectAll)就是一个“模糊”的值。

Answer 2

有很多方法可以解决此问题： 1）您可以编写更改功能以选中所有复选框。在该功能中，首先应该过滤所有数据，然后再检查它们。 2）您可以将主数据复制到另一个变量（我们现在将其称为x）。之后，在表格中显示x（不是您的主要资源）。当您想使用搜索框过滤器主数据过滤行并将其粘贴到x变量中时，如果要使用它进行检查或添加等操作，请使用x变量

Angular Datatables-仅选择过滤的行

2 个答案: