Question

我的应用程序中有一个网格，用户需要以下功能。

之情况

网格中有4列，我们称之为A，B，C和D.
多列可以排序，可以重新排序。
默认排序为A，B，C，D
如果用户将列C拖动为第一列，则排序应为C，A，B，D。

我知道网格上有columnOrder个事件。这个功能可以吗？在任何地方都有例子或有人可以指导我如何完成这项功能吗？

由于

吉姆

Answer 1

在事件处理程序中，您可以从this.columns获取新的列顺序。然后你应该编写排序标准并应用它。

类似的东西：

        columnReorder: function() {
          var sort = [];
          $.each(this.columns, function(idx, elem) {
            // In my case order by those columns that start with "Ship" 
            if (elem.field.lastIndexOf("Ship", 0) === 0) {
              sort.push({field: elem.field, dir: "asc"});
            }
          });
          this.dataSource.sort(sort);
        },

遵循可运行的示例。

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      },
      schema: {
        model: {
          fields: {                         
            OrderID: { type: "number" },           
            ShipCountry: { type: "string" },
            ShipCity: { type: "string" },
            ShipName: { type: "string" },
            OrderDate: { type: "date" },
            ShippedDate: {type: "date" }
          }
        }
      },
      pageSize: 15
    },
    height: 550,
    sortable: true,
    reorderable: true,
    resizable: true,
    pageable: true,
    columnReorder: function() {
      var sort = [];
      $.each(this.columns, function(idx, elem) {
        if (elem.field.lastIndexOf("Ship", 0) === 0) {
          sort.push({field: elem.field, dir: "asc"});
        }
      });
      this.dataSource.sort(sort);
    },
    columns: [
      {
        field: "OrderID",
        title: "ID",
        width: 80
      },
      {
        field: "ShipCity",
        title: "Ship City"
      },
      {
        field: "ShipName",
        title: "Ship Name"
      },
      {
        field: "ShippedDate",
        title: "Shipped Date",
        format: "{0:MM/dd/yyyy}",
        width: 200
      }
    ]
  });
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-office365.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.office365.min.css" />

<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>

<div id="grid"></div>

Kendo UI Grid自定义排序

1 个答案: