javascript - 带有全选复选框和淘汰赛的 JQuery 数据表

Question

我有带有复选框功能的 JQuery Datatable，其中行和标题元素是使用敲除 js 绑定的。我对这两个概念都很陌生。我希望实现全选复选框功能。这是我希望实现的两件事

1. 如果我搜索然后单击全选，我希望选中已过滤数据的所有复选框。
2. 对于通过敲除绑定到表的每个表行，我的 Model.cs 中都有一个 RowID 属性。我希望将该值保存在一个数组中，以便采取进一步的行动。

我的点击事件让我得到了数据表的所有 rowid，没有过滤的。

以下是我的代码片段： HTML -

   <table id="tblReport" data-bind="with:reportData">
        <thead>
            <tr>  <th data-bind="visible:ShowCheckBoxAndSubmit">
                                    <label for="chkAll">Release</label><br />
                                        <div>
                                        <input id="chkAll" type="checkbox" data-bind="value:$parent.isAllSelected,checked: $parent.isAllSelected ,click:$root.onchkAllClick">
                                        </div>
                                </th>                   
                <!-- ko foreach: Header.Cells -->
                <th data-bind="foreach: Content">
                    <span class="frmContent" data-bind="text: $data, css:$parent.DisplayType"></span>
                </th>
                <!-- /ko -->
            </tr>
        </thead>
        <tbody data-bind="foreach: Rows">
            <tr data-bind="css: { selected: isChecked() }">
                <td data-bind="visible:$parent.ShowCheckBoxAndSubmit">
                    <input type="checkbox" id="chkSelect" data-bind="value:isChecked ,checked: isChecked,click: $root.onCheckBoxClick" />
                </td>
                <!-- ko foreach: Cells -->
                <td data-bind="foreach: Content , css:DisplayType == 'CheckBox'?'frmContent':DisplayType">
                    <span class="frmContent" data-bind="visible:$parent.DisplayType != 'CheckBox' && $parent.Content != 'none',html: getReportCell($data,$parent.Url), css:$parent.DisplayType"></span>                   
                </td>
                <!-- /ko -->
            </tr>
        </tbody>
    </table>

JS：self.bind 传递从服务调用接收到的数据

self.reportData = ko.observable();

self.bind = function (rptTable) {
rptTable.Rows.forEach(function (item) {
            if (self.itemsSelected() != undefined)
                item.isChecked = ko.observable(self.itemsSelected().indexOf(item.RowId) != -1);
            else
                item.isChecked = ko.observable(false);
        });

    self.reportData(rptTable);
}
self.onchkAllClick = function (data) {
        // check the boxes for the filtered rows and get the associated RowID 
        var all = self.isAllSelected();
        var table = $('#tblReport').DataTable();
        // Get all rows with search applied
        var rows = table.rows({ filter: 'applied' });
            
       var reportData = self.reportData(); // reportData is bound to the table 
       ko.utils.arrayForEach(reportData.Rows, function (row) {
               row.isChecked(all);
                if (all) {
                   self.itemsSelected.push(row.RowId);
                }
                else {
                    self.itemsSelected.remove(row.RowId);
                }
           });
        return true;
    };

标签： javascriptjqueryknockout.jsdatatables