Kendo UI Grid 自定义排序答案

【问题标题】：Kendo UI Grid custom sortingKendo UI Grid 自定义排序
【发布时间】：2015-07-24 15:04:24
【问题描述】：

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

场景

网格中有 4 列，我们称它们为 A、B、C 和 D。
多列可排序并可重新排序。
默认排序为 A、B、C、D 列
如果用户将 C 列拖到第一列，那么排序应该是 C、A、B、D。

我知道网格上有一个columnOrder 事件。这个功能可以吗？是否有任何示例，或者有人可以指导我如何完成此功能？

谢谢

吉姆

【问题讨论】：

标签： asp.net-mvc kendo-ui telerik kendo-grid kendo-asp.net-mvc

【解决方案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>

【讨论】：