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

首先，设置网格init的值非常重要（正如您已经正确完成的那样）

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”属性，因为input-tags没有id。只有一堂课。

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

1 个答案: