如何突出显示/更改已排序列标题的背景颜色？答案

【问题标题】：How to highlight/Change the background color of the sorted column headers?如何突出显示/更改已排序列标题的背景颜色？
【发布时间】：2015-12-27 10:23:45
【问题描述】：

我想在排序后更改列的背景颜色，无论是升序还是降序。请记住不是所有的列，只有排序的列背景。提前致谢

$scope.gridOptions = {

        .....
        .....
        dataBound : function(arg){

            var columns = arg.sender.columns;

            var sortedColumns = arg.sender.dataSource.sort();

            for (var i = 0; i < sortedColumns.length; i++) {

                var srtColumn = sortedColumns[i];

                for (var j = 0; j < columns.length; j++) {

                    var column = columns[j];

                    if (srtColumn.field === column.field) {

                        column.attributes = { style : "text-align:right" };
                    }
                }

            }

        },
        editable: {
            mode: 'popup',
        },
        height: 700,
        columns: [
            { field: "Name", title: "Name", width: 150, editable: false},
            { field: "Address", title: "Address", width: 100, editable: false },
            { field: "Company", title: "Company", editable: false },
        ]
    };

【问题讨论】：

标签： kendo-ui grid

【解决方案1】：

我是通过databound函数实现的

 $scope.gridOptions = function {
 .............
        dataBound: function (arg) {

            var columns = arg.sender.columns;

            var sortedColumns = arg.sender.dataSource.sort();

            var sortedIndex = -1;

            for (var i = 0; i < columns.length; i++) {

                var sorted = false;

                var column = columns[i];


                sortedIndex = sortedIndex + 1;

                for (var j = 0; j < sortedColumns.length; j++) {

                    var srtColumn = sortedColumns[j];

                    if (srtColumn.field === column.field) {

                        sorted = true;
                        break;
                    }

                }

                if (sorted) {
                    arg.sender.thead
                        .find("tr")
                        .find("th:eq(" + sortedIndex + ")")
                        .css({ background: "#6666ff" });
                }
                else {
                    arg.sender.thead
                        .find("tr")
                        .find("th:eq(" + sortedIndex + ")")
                        .css({ background: "#323232"});
                }

            },
            .....
        };

【讨论】：