在kendo网格中排序数据时调用的事件

时间:2014-09-12 00:39:51

标签: kendo-ui kendo-grid

我的示例代码如下:

  $(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"将被召唤。怎么做?

4 个答案:

答案 0 :(得分:7)

您启用了本地排序"可排序: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......
                   }
                 });

如果您正在使用服务器排序,则可以在服务器读取中处理它。

希望这有帮助

答案 1 :(得分:1)

您可以绑定更改功能并检查每次网格更改是否存在排序

$('#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");
   }           

});

我希望这会对你有所帮助

答案 2 :(得分:0)

您可以为每个列定义自定义排序功能,然后从那里触发whenSorting事件,如下所示:

$(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;
  }
 });

答案 3 :(得分:0)

我使用jQuery来隐藏列,我无法使用kendo的hideColumn和showColumn函数。在排序时,我最终会得到一个我希望隐藏的列在sort事件被触发后显示出来。我发现使用上面提到的块然后使用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();
                  });
               }
             });

也可以用这个来检查你的格式。