坚持行复选框选择网格与分页

我有一个与剑道网格的JavaScript代码，当我做一个搜索和获得结果时，我应该能够从一个复选框从网格中选择项目。当我改变页面并选择更多项目时，问题就出现了，第1页中的选定项目消失了。我可以将选定的项目存储在一个数组中，但是选中的实际复选框不会保留，这会使网格认为没有选定的项目。坚持行复选框选择网格与分页

以下是我将代码存储在数组中的代码片段。

groupMemberSearchGridOnDataBinding = function (e) { 
    $(clsContentPanel).has(gridId).show(); 
    if (e.items.length === 0) { 
    $(divGroupMemberSearch).attr(style, display + displayNone); 
    $(plusMinusSearchMemberClick).addClass(clsPlus).removeClass(clsMinus); 
    $(plusMinusSearchMemberClick).addClass(pnlCollapsed); 
    $(toggleButton).find(hr).show(); 
    $(groupMemberCancelButton).show(); 
    $(groupMemberSaveButton).hide(); 
    hideLoadingDialog(); 
    } 
    else { 
    var grid = $(gridId).data("kendoGrid"); 
    var grid_radio = $(gridId).data(kendoGrid); 
    var row = $(inputChecked, grid_radio.tbody).closest("tr"); 
    var gridDiagnosisData = []; 
    for (var index = 0; index < row.length; index++) {     
     var selectedMemberInfo = { 
     GroupPolicy: { 
      MemberID: grid.dataItem(row[index]).TPLMemberID, 
      MemberNumber: grid.dataItem(row[index]).TPLIndividualID, 
      MemberName: grid.dataItem(row[index]).GroupMemberName, 
      RelationshipDesc: "", 
      CostAvoidanceDesc: "", 
      CostAvoidanceDenialReasonDesc: "", 
      PolicyDetailId: "", 
      IsAdd: true, 
      IsValid: true 
     } 
     }; 
     gridDiagnosisData.push(selectedMemberInfo.GroupPolicy) 
    } 
    if (row.length > 0) { 
     retainCheckBoxSelection(); 
    } 
    $(divGroupMemberSearch).attr(style, display + displayNone); 
    $(plusMinusSearchMemberClick).addClass(clsPlus).removeClass(clsMinus); 
    $(plusMinusSearchMemberClick).addClass(pnlCollapsed); 
    $(toggleButton).find(hr).show(); 
    $(groupMemberCancelButton).show(); 
    $(groupMemberSaveButton).show(); 
    hideLoadingDialog(); 
    } 
};

来源

2017-09-01 Mario Herrera

有很多例子说明如何完成这项任务。它涉及两个步骤。

1. 使用改变事件

2. 保存行选择以阵列通过在结合事件

在这里数据进行迭代阵列保留行选择是从Telerik的文档的链接 - Persist Row Selection during Data Operation

以下是工作副本的活代码和链接demo。

另外这个demo告诉如何处理复选框选择。

<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"/> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"/> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css"/> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css"/> 

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script> 
</head> 
<body> 

    <div id="grid"></div> 

    <script> 

     $(function() { 

     var selectedOrders = []; 
     var idField = "OrderID"; 

     $("#grid").kendoGrid({ 
      dataSource: { 
      type: "odata", 
      transport: { 
       read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
      }, 
      schema: { 
       model: { 
       id: "OrderID", 
       fields: { 
        OrderID: { type: "number" }, 
        Freight: { type: "number" }, 
        ShipName: { type: "string" }, 
        OrderDate: { type: "date" }, 
        ShipCity: { type: "string" } 
       } 
       } 
      }, 
      pageSize: 10, 
      serverPaging: true, 
      serverFiltering: true, 
      serverSorting: true 
      }, 
      height: 400, 
      selectable: "multiple", 
      pageable: { 
      buttonCount: 5 
      }, 
      sortable: true, 
      filterable: true, 
      navigatable: true, 
      columns: [ 
      { 
       field: "ShipCountry", 
       title: "Ship Country", 
       width: 300 
      }, 
      { 
       field: "Freight", 
       width: 300 
      }, 
      { 
       field: "OrderDate", 
       title: "Order Date", 
       format: "{0:dd/MM/yyyy}" 
      } 
      ], 
      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); 
      } 
     }); 
     }); 
    </script> 
</body> 
</html>

来源

2017-09-01 23:38:04

@Mario Herrera如果这有帮助，你能接受它作为答案吗？ –

坚持行复选框选择网格与分页

回答

相关问题