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

您可以在行动here

中看到它

Answer 2

不幸的是，只有当您的kendogrid具有属性columnMenu: false时，接受的答案才有效。如果您激活了列菜单，则不会添加k-state-active类。你可以在这里看到它：http://demos.kendoui.com/web/grid/column-menu.html。

<强>解决方案在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;        
    }
}

现在，它会将k-state-active类正确添加到.k-header-column-menu已过滤的列

来源：http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/columnmenu-how-to-show-applied-filter.aspx#wGDLlf8GqkuGtkRiIx2Azg

另一方面，如果您和我一样喜欢仅突出显示菜单图标，您可以查找包含菜单图标的子跨栏，从而更改行

this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active");

为：

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

在我的示例中，我使用的是内置k-state-selected类

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

2 个答案: