Question

我想在分页或在kendo网格中的其他选项卡上移动时继续选择复选框。我在这里提到了“如何在网格上分页时保持当前复选框状态”，但是我没有得到checked和checkbox的值并与步骤混淆。请详细指导。我已在下面附加代码。我已在下面附加脚本代码kendo ui代码和html代码。还考虑使用Session存储选定复选框的值，但我不知道这是什么正确与否。请尽快指导我。

        <div class="dashboardCharts" id="grid-display">  
             <div class="count-detail-top right">
                    <div class="count-detail-bg right">
                        <ul id="ulOptions">
                            <li id="Employee" data-type="employee"><a href="javascript:void(0)">Employee</a></li>
                            <li id="Visitor" data-type="visitor"><a href="javascript:void(0)">Visitor</a></li>                     
                        </ul>
                    </div>
                </div>
       @(Html.Kendo().Grid<xyz.Models.abcModel>()
             .Name("grid")         
            .Columns(columns =>
            {
                columns.Bound(c => c.Employee_id).Title("Alert On").Width(200)
                  .ClientTemplate("<input type=\"checkbox\" class=\"checkbox\"  data-id=\"#= Employee_id#\"/>").Sortable(false);                       
                columns.Bound(c => c.Employee_name).Title("Employee Name");                                
            })           
         .NoRecords("No Records Found")                           
               .Events(e => e.DataBound("onDataBound"))           
                .DataSource(dataSource => dataSource                                 
                .Transport(transport =>
                   transport
                   .Read(read => read.Url(DataUrl))  
                    .ParameterMap("parameterMap")
                ))

            )
             </div> 

//code in script :     
       <script> 
          function onDataBound(e) {

            $(".checkbox").bind("click", function (e) {
                e.stopPropagation();
                $(e.target).closest("tr").toggleClass("k-state-selected");

                var tr = $(e.target).closest("tr");
                var chk = $(tr).find(".checkbox");
                var selected = $(chk).attr("data-id");

                var a = selectedIDs.includes(selected);
                if (a != true) {
                    if ($(chk).prop("checked")) {
                        selectedIDs.push(selected);
                    }
                    else {                   
                     selectedIDs.pop(selected);                 
                    }
                }

            });


            var gridDataView = $("#grid").data().kendoGrid.dataSource.view();        
            for (var i = 0; i < gridDataView.length; i++) {
                var panelApplicationId = gridDataView[i].Checkbox;            
                if (ShouldBeChecked(panelApplicationId)) {
                    $('#grid tr td input').eq(i).prop("checked", true);
                }
            }       
        }      
         $(document).on('click', 'input.checkbox', function (e) {
            var checked = $(this).prop("checked");
            var gridDataView = $("#grid").data().kendoGrid.dataSource.view();
            console.log(gridDataView);
            var idx = $(this).closest("tr").find("td:nth-child(1)").text();
            var gridData = $("#grid").data().kendoGrid.dataSource.data();
            for (var i = 0; i < gridData.length; i++) {
                if (gridData[i].ID == idx) {
                    gridData[i].Checkbox = checked;
                    break;
                }
            }
        });
        function ShouldBeChecked(panelApplicationId) {
            var shouldBeChecked = false;
            var gridData = $("#grid").data().kendoGrid.dataSource.data();
            for (var i = 0; i < gridData.length; i++) {
                if (gridData[i].Checkbox == panelApplicationId) {
                    if (gridData[i].Checkbox) {
                        shouldBeChecked = true;
                    }
                    break;
                }
            }
            return shouldBeChecked;
        }

    </script>

    code for selected checkbox and and not selected checkbox.
    <input type="checkbox" class="checkbox" data-id="34" checked="checked">
    <input type="checkbox" class="checkbox" data-id="30">

Answer 1

如OP在2017 R2版本的问题注释中所提到的，有一个网格选项persistselection

在此之前，Kendo版本可以添加自己的代码，将选择存储在change事件中，并在databound事件中将其还原，如Kendo在persist-row-selection中所示：

     change: function (e, args) {
        var grid = e.sender;
        var items = grid.items();
        items.each(function (idx, row) {
            var idValue = grid.dataItem(row).get(idField);
            if (row.className.indexOf("k-state-selected") >= 0) {
                selectedOrders[idValue] = true;
            } else if (selectedOrders[idValue]) {
                delete selectedOrders[idValue];
            }
        });
      },
      dataBound: function (e) {
        var grid = e.sender;
        var items = grid.items();
        var itemsToSelect = [];
        items.each(function (idx, row) {
          var dataItem = grid.dataItem(row);
          if (selectedOrders[dataItem[idField]]) {
            itemsToSelect.push(row);
          }
        });

        e.sender.select(itemsToSelect);
      }

（另请参见this SO-question。）

在Kendo网格上分页或更改选项卡时，如何保持选择复选框状态

1 个答案: