Angular 数据表 - Select 仅过滤行

Question

我正在以 angular 方式呈现我的 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

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

Answer 2

您必须浏览数据表API。 DT 从 "shadow table" 中删除并注入 DOM 节点，因此仅操纵 DOM 只会产生明显的（不是真实的）效果，直到下一次重绘。幸运的是，您已经实现了 dtInstance。

从 1.10.6 开始，遍历行、列或单元格的最方便的方法是 every 方法。看到这个 plunkr -> 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)就是"obscure"

Angular 数据表 - Select 仅过滤行

Angular Datatables - Select only filtered rows

html

angular-datatables