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

时间:2015-12-27 10:23:46

标签: kendo-ui grid

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

$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 },
        ]
    };

1 个答案:

答案 0 :(得分:1)

我是通过数据绑定功能实现的

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

            },
            .....
        };