堅持行復選框選擇網格與分頁

我有一個與劍道網格的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如果這有幫助，你能接受它作爲答案嗎？ –

堅持行復選框選擇網格與分頁

回答

相關問題