Javascript 更改剑道网格中过滤列标题的颜色

我正在做一个项目使用剑道控制和我使用一个剑道网格。我的要求是，当我对一列应用过滤时，我想更改过滤列标题的颜色。我的剑道格网代码是：

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

---

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

我在网格上看不到任何允许您指定此事件或任何可以挂接到的筛选器事件的配置，但是这并不是不可能的

查看网格中发生的情况，过滤列时，列标题中的过滤器图标会添加另一类

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

---

您可以在操作中看到它

不幸的是，只有当您的kendogrid具有属性

column menu:false时，接受的答案才有效。如果列菜单处于活动状态，则不会添加任何
k-state-active
类。您可以在这里看到：


解决方案
在kendogrid声明中设置
dataBound:dataBound
，并调用此函数

function dataBound(e) {
    var filter = this.dataSource.filter();
    this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active");
    if (filter) {
        var filteredMembers = {};
        setFilteredMembers(filter, filteredMembers);
        this.thead.find("th[data-field]").each(function () {
            var cell = $(this);
            var filtered = filteredMembers[cell.data("field")];
            if (filtered) {
                cell.find(".k-header-column-menu").addClass("k-state-active");
            }
        });
    }     
}      

function setFilteredMembers(filter, members) {
    if (filter.filters) {
        for (var i = 0; i < filter.filters.length; i++) {
            setFilteredMembers(filter.filters[i], members);
        }         
    }
    else {
        members[filter.field] = true;        
    }
}

致：

当然还有那条线

cell.find(".k-header-column-menu").addClass("k-state-active");

致：

在我的示例中，我使用内置的
k-state-selected
class
任何人都请回复我。。。
this.thead.find(".k-header-column-menu > span").removeClass("k-state-selected");

cell.find(".k-header-column-menu").addClass("k-state-active");

cell.find(".k-header-column-menu").find("span").addClass("k-state-selected");