剑道网格丢失选定的行答案

【问题标题】：Kendo grid loosing selected row剑道网格丢失选定的行
【发布时间】：2023-03-23 08:50:02
【问题描述】：

我正在为我的网格使用 Kendo UI，一切正常。我可以使用滚动和移位选择一行或多行。问题是，如果我选择第 3 行，然后某个事件刷新网格，然后我也想选择第 4 行，Kendo 会选择上述所有行，在本例中是从第 1-4 行。

所以我的问题是如何解决这个问题？

演示中的期望结果：选择德国，刷新网格，然后选择直到比利时。该演示将从第 1 行中选择比利时。

这是demo

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

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

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
  </head>
  <body>
    <button id="refresh">Refresh</button>
    <div id="grid"></div>

    <script>

      $(function () {

        var selectedOrders = [];
        var idField = "OrderID";
                $('#refresh').click(() => {
            $("#grid").getKendoGrid().dataSource.read();
        })
        
        $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "http://demos.kendoui.com/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>

【问题讨论】：

看来 kendo 在您的 change 事件之前选择了所有行，这导致您的事件内部出现问题。

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

这个问题与我在这里写的Kendo Grid Persist Row Example 的问题非常相似。在我写的例子中，我使用了推荐的persistSelection。

发生这种行为是因为在刷新事件之后，网格不再知道之前关注的是哪一行。所以在dataBound 上，我们需要重新设置焦点。这是一个可能对您有所帮助的 sn-p。

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

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

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
  </head>
  <body>
    <button id="refresh">Refresh</button>
    <div id="grid"></div>

    <script>
      $(function() {
        var selectedOrders = [];
        var idField = "OrderID";
        $('#refresh').click(() => {
            $("#grid").getKendoGrid().dataSource.read();
        });
        
        $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "http://demos.kendoui.com/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);
              }
            });
            
            if (itemsToSelect.length > 0) {
              var lastRow = itemsToSelect[itemsToSelect.length - 1];
              grid.selectable._lastActive = lastRow;
              grid.current($(lastRow).find("td:first"));
            }

            e.sender.select(itemsToSelect);
          }
        });
      });
    </script>
  </body>
</html>

【讨论】：