javascript - 在 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

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

我在网格上看不到任何允许您指定此事件或您可以 Hook 的任何过滤器事件的配置，但这并不意味着不可能。

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

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

// 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;
}

您可以在实际中看到它 here