以编程方式选择所有行并保持选择

Question

如何使用 JavaScript 以编程方式选择 Bootgrid 表中的所有行？

我在操作栏中添加了一个按钮，并且我有一个函数循环遍历 JQuery Bootgrid 表中的所有行。

到目前为止，我正在获取表中的所有行 id (data-row-id)，甚至在 bootgrid 表中的其他页面上也是如此。

如何从这里选择所有行并以编程方式保持选择？

谢谢

代码如下：

// JS
<script>
    $(document).ready(function () {
        var count = 0;
        var dt = $("#table1").bootgrid({
            selection: true,
            multiSelect: true,
            keepSelection: true,
            rowSelect: true
        }).on("selected.rs.jquery.bootgrid", function (e, rows) {
            var rowIds = [];
            for (var i = 0; i < rows.length; i++) {
                count++;
            }

            $('#NumSelected').html(count);
            console.log(count);

        }).on("deselected.rs.jquery.bootgrid", function (e, rows) {
            var rowIds = [];
            for (var i = 0; i < rows.length; i++) {
                count--;
            }

            $('#NumSelected').html(count);
            console.log(count);

        });

        var rows = dt.data('.rs.jquery.bootgrid').rows;

        // Get all Ids in the table and log
        for(var i = 0; i < rows.length; i++)
        {
            console.log(rows[i].ID);
        }

        // append button in action bar
        $(".bootgrid-header .actionBar").find('.actions.btn-group').append('<button id="selectAll" class="btn btn-default" type="button" title="Select All Clients Listed"><span class="icon glyphicon glyphicon-saved"></span></button>');


        // Select all rows in table
        // This is not working, I have data paginated in 8 pages (80 rows)
        // and the code below only select the data in the first page

        // I want to select all rows in the table and keep the selection by using jquery bootgrid
        $("#selectAll").click(function () {
            $('#table1 tbody > tr').each(function() {
                $(this).addClass('active').attr('aria-selected', true);
                $(this).find(":checkbox").prop('checked', true);
            });

            // get all selected rows id in array
            var selectedRowsId = $("#table1").bootgrid('getSelectedRows');
            console.log(selectedRowsId);
        });

    });
</script>


// html
<table id="table1">
<thead>
<tr>
<th data-column-id="ID" data-identifier="true" data-type="numeric">ID</th>
<th data-column-id="Name" data-type="string">Name</th>
<th data-column-id="OtherDetails" data-type="string">Other Details</th>
</tr>
</thead>
<tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.ID</td>
                <td>@item.Name</td>
                <td>@item.OtherDetails</td>
            </tr>
        }
    </tbody>
</table>

Answer 1

首先，设置网格初始化的值很重要（正如您已经正确完成的那样）

var dt = $("#table1").bootgrid({
        selection: true,
        multiSelect: true,
        keepSelection: true,
        rowSelect: true
        ...

其次，从 bootgrid 版本 1.1.0 开始，您可以调用“select”方法来选择所有项目：

$("#yourGridName").bootgrid("select");

在你的情况下：

$("#table1").bootgrid("select");

（在服务器端场景中，只有加载的项目是可选的。）

因此，您可以生成一个 JS 函数和一个 HTML 按钮：

<button onclick="selectAllItems();">Select all loaded Items</button>

function selectAllItems()
{
  $("#table1").bootgrid("select");
}

我已经用几个页面对其进行了测试。将选择所有加载的项目，并在前进和后退到几页后保留选择。

我正在使用当前版本的 bootgrid：V 1.3.1

就我而言，在转到新页面后，我正在通过 AJAX 加载新页面。所以只能检查加载的项目。但是在加载新页面后会保留选中的复选框。

如果要检查某些项目，可以选择具有 id 数组的项目：

$("#table1").bootgrid("select", [rowIdsArray]);

例如：

$("#table1").bootgrid("select", [1,3,5,8,9]);

在 bootgrid 文档中，“行 ID”的含义不是很清楚。

我认为是“data-row-id”属性，因为输入标签没有 id。只有一个类。