Kendo Grid - 如何记住选定的行?

时间:2016-09-26 14:10:18

标签: kendo-grid

http://dojo.telerik.com/eWakO 剑道网格 - 这里我应该如何修改上面的代码来记住选定的行?例如,如果我在第一页上突出显示第4行,然后滚动到页面并返回第1页,则应突出显示第4行。

由于 Datha

1 个答案:

答案 0 :(得分:1)

以下是文档中的示例:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/persist-row-selection-while-paging

它依赖于changedataBound事件来按其ID保存和恢复所选行。

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

<script>

  $(function () {

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

    $("#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>