user-interface - 突出显示已排序的列

Question

我正在触发数据绑定事件，但我不确定从那里做什么。此处的链接指向通用文档： http ://www.kendoui.c​​om/forums/ui/grid/highlight-sorted-column.aspx

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

Answer 1

思路如下：

1. 处理网格的dataBound事件。
2. 使用其sort方法获取数据源的当前排序表达式。
3. 找到绑定到已排序字段的网格列。遍历网格列字段。
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