突出显示已排序的列

Question

我正在解雇数据绑定事件，但我不确定从那里做什么。 这里的链接导致通用文档： http://www.kendoui.com/forums/ui/grid/highlight-sorted-column.aspx

有没有人有一个突出显示当前排序列的简单示例？

Answer 1

这个想法如下：

1. 处理网格的dataBound事件。
2. 使用data source方法获取sort的当前排序表达式。
3. 找到绑定到排序字段的网格列。迭代网格columns字段。
4. 突出显示与列索引对应的表格单元格。使用网格的tbody字段。

以下是一个示例实现：

<div id="grid"></div>
  <script>
  $("#grid").kendoGrid({
    dataSource: [ 
      { name: "Jane Doe", age: 30 },
      { name: "Jane Doe", age: 33 }
    ],
    sortable: true,
    dataBound: function() {
      var columns = this.columns;
      var sort = this.dataSource.sort()[0];

      var sortedIndex = -1;

      if (sort) {
        for (var i = 0; i < columns.length; i++) {
          if (columns[i].field == sort.field) {
            sortedIndex = i;
            break;
          }
        }
      }

      if (sortedIndex >= 0) {
        this.tbody
            .find("tr")
            .find("td:eq(" + sortedIndex + ")")
            .css( { background: "#a0b0c0" } );
      }
    }
  });
  </script>

现场演示：http://jsbin.com/ixahid/1/edit