Kendo ui 在剑道网格中排序数据时调用的事件

我有如下示例代码：

  $(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: getData(),
        height: 550,
        sortable: true,
        pageable: true,
        columns: [{
            field: "ContactName",
            title: "Contact Name",
            width: 200
        }, {
            field: "ContactTitle",
            title: "Contact Title"
        }, {
            field: "CompanyName",
            title: "Company Name"
        }]
    });
       function whenSorting(){
           //// DO SOMETIME......
       }
     });

---

现在我想要的是，当我对任何字段进行排序时，将调用函数“whenSorting”。如何做到这一点？

您可以绑定Change函数并检查每个网格更改上是否存在排序

$('#grid').data('kendoGrid').dataSource.bind('change',function(){

    // Get the grid object
     var grid = $("#grid").data("kendoGrid");
    // Get the datasource bound to the grid
    var ds = grid.dataSource;
    // Get current sorting
    var sort = ds.sort();
    // Display sorting fields and direction
    if (sort) {
    for (var i = 0; i < sort.length; i++) {
        alert ("Field:" + sort[i].field + " direction:" + sort[i].dir);
    }
    } else {
    alert("no sorting");
   }           

$（'#grid'）.data（'kendoGrid'）.dataSource.bind（'change'，function（）{
//获取网格对象
var grid=$（“#grid”）.data（“kendoGrid”）；
//获取绑定到网格的数据源
var ds=grid.dataSource；
//获取当前排序
var sort=ds.sort（）；
//显示排序字段和方向
如果（排序）{
对于（变量i=0；i

}))

---

我希望这将帮助您

您启用了本地排序“sortable:true”，因此您可以使用数据绑定事件捕获它

    $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: getData(),
                        height: 550,
                        sortable: true,
                        pageable: true,
                        columns: [{
                            field: "ContactName",
                            title: "Contact Name",
                            width: 200
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }],
                        dataBound: function(e) {
                          whenSorting();
                        }
                    });

                   function whenSorting(){
                       //// DO SOMETIME......
                   }
                 });

如果使用服务器排序，则可以在服务器读取中处理它

---

希望这对您有所帮助

您可以为每个列定义一个自定义排序函数，并在从那里接收事件时触发

，如下所示：

$(document).ready(function () {
  $("#grid").kendoGrid({
    dataSource: getData(),
    height: 550,
    sortable: true,
    pageable: true,
    columns: [{
        field: "ContactName",
        title: "Contact Name",
        width: 200,
        sortable { compare: whenSorting }
    }, {
        field: "ContactTitle",
        title: "Contact Title",
        sortable { compare: whenSorting }
    }, {
        field: "CompanyName",
        title: "Company Name",
        sortable { compare: whenSorting }
    }]
  });

  function whenSorting(a, b){
     //// DO SOMETIME......

    return a == b
      ? 0
      : a > b
        ? 1
        : -1;
  }
 });

我使用jQuery隐藏列，但无法使用kendo的hideColumn和showColumn函数。在排序时，我会在触发排序事件后显示一个我希望隐藏的列。我发现使用上面提到的块，然后使用jQuery编写一个函数来显示或隐藏列，就像我预期的那样

    $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: getData(),
                    height: 550,
                    sortable: true,
                    pageable: true,
                    columns: [{
                        field: "ContactName",
                        title: "Contact Name",
                        width: 200
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title"
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }],
                    dataBound: function(e) {
                      whenSorting();
                    }
                });

               function whenSorting(){
                   if(_checkBox.is(':checked'){
                      grid.find("table th").eq(4).show();   
                      grid.children("div:eq(1)").find("table").find("tr").each(function () {
                         $(this).children("td:eq(4)").show();
                  });
               }
             });

可能也想用这个检查你的格式
 由于排序更改不会触发，您可以查看Api文档定义，它似乎不会在订阅时触发更改，而在使用单元格选择时，绑定后是很好的选择