更改Kendo Grid中已过滤列标题的颜色

Question

我正在使用Kendo控件做一个项目,我正在使用一个Kendo网格.我的要求是当我对一列应用过滤时,我想更改过滤列标题的颜色.我的剑道网格代码是:

    var grid = $("#grid").kendoGrid({
        dataSource: {
            type           : "odata",
            transport      : {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
            },
            schema         : {
                model: {
                    fields: {
                        OrderID  : { type: "number" },
                        Freight  : { type: "number" },
                        ShipName : { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity : { type: "string" }
                    }
                }
            },
            pageSize       : 10
        },
        filterable: true,
        sortable  : true,
        pageable  : true,
        columns   : [
            {
                field     : "OrderID",
                filterable: false
            },
            "Freight",
            {
                field : "OrderDate",
                title : "Order Date",
                width : 100,
                format: "{0:MM/dd/yyyy}"
            },
            {
                field: "ShipName",
                title: "Ship Name",
                width: 200
            },
            {
                field: "ShipCity",
                title: "Ship City"
            }
        ]
    }).data("kendoGrid");

Answer 1

当您过滤网格时,过滤器图标实际上会改变颜色,但您希望整个标题更改？

我在网格上看不到任何允许您指定此挂起或任何可以挂钩的过滤器事件的配置,但这并不是不可能的.

查看网格中发生的情况,当您过滤列时.k-state-active,会在列标题中的过滤器图标中添加一个附加类.我们可以应用一些可以很容易地改变该类背景颜色的CSS,但它不适用于整个标题(父TH元素),并且CSS中没有父选择器.

我认为为了做到这一点,您可能必须覆盖Kendo FilterMenu小部件的刷新功能,方法是将其替换为您自己的函数,然后调用原始函数.完成此操作后,您可以扩展FilterMenu以向整个标头添加其他类.

// Grab old refresh function
var filterMenu = kendo.ui.FilterMenu.fn;
filterMenu.oldRefresh = filterMenu.refresh;

// Replace it with our own
filterMenu.refresh = function () {
   filterMenu.oldRefresh.apply(this, arguments);

   // Add an additional class to the column header
   if (this.link.hasClass('k-state-active')) {
      this.link.parent().addClass('k-state-active');
   } else {
      this.link.parent().removeClass('k-state-active');
   }
};

然后,您可以使用CSS调整.k-state-active网格标题内的背景颜色.

#grid thead .k-state-active {
  background-color: crimson;
}

你可以在这里看到它