4

私は剣道のコントロールを使用してプロジェクトを行っており、1つの剣道グリッドを使用しています。私の要件は、1つの列にフィルタリングを適用するときに、フィルタリングされた列ヘッダーの色を変更したいということです。私の剣道グリッドコードは次のとおりです。

    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

グリッドをフィルタリングすると、フィルターアイコンの色が実際に変わりますが、ヘッダー全体を変更しますか？

グリッド上に、これまたはフックできるフィルターイベントを指定できる構成が表示されませんが、それが不可能になるわけではありません。

グリッドで何が起こるかを見ると、列をフィルター処理する.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');
   }
};

.k-state-active次に、CSSを使用して、グリッドヘッダー内の背景色を調整できます。

#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 。

解決策dataBound: dataBoundkendogrid宣言でを 設定し、この関数を呼び出します

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 に答える