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

Question

如何使用 JavaScript 以编程方式 select 我的 Bootgrid table 中的所有行？

我在操作栏中添加了一个按钮，我有一个循环遍历 JQuery Bootgrid table.

中所有行的功能

到目前为止，我正在获取 table 中的所有行 ID (data-row-id)，甚至在 bootgrid table.

中的其他页面上

我如何 select 从这里开始的所有行并以编程方式保留 selection？

谢谢

代码如下：

// 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" 方法来 selecting 所有项目：

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

你的情况：

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

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

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

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

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

我用几个页面测试过它。所有加载的项目都将被 selected 并且 selection 在前进和后退几页后保持不变。

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

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

如果您想检查某些项目，您可以 select 具有 id 数组的项目：

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

例如：

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

在bootgrid的文档中，不是很清楚，"row ids"是什么意思。

我认为是 "data-row-id" 属性，因为输入标签没有 ID。只有一个class.

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

Select all rows programmatically and keep selection

javascript

jquery

jquery-bootgrid