4

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

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

2 回答 2

5

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

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

查看网格中发生的情况，当您过滤列时，会.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;
}

你可以在这里看到它的作用

于 2013-03-15T10:33:25.777 回答
1

不幸的是，仅当您的 kendogrid 具有该属性时，接受的答案才有效columnMenu: false。如果您激活了列菜单，k-state-active则不会添加任何类。你可以在这里看到它：http ://demos.kendoui.c​​om/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.c​​om/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类

于 2013-12-22T21:49:14.440 回答