Question

我有一个带有Kendo网格的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();
  }
};

Answer 1

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

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>

Answer 2

可以分两步完成。

使用更改事件将行选择保存在数组中
通过数据绑定中的迭代数组保留行选择事件

第一个 Telerik 文档已经有一个 documentation link

最后，关于如何在这里选择一行是正在运行的demo

使用分页在网格中保留行复选框选择

2 个答案: