0

ユーザーメニューから表示および非表示にしたい多数の列を持つテーブルを作成しています。

kendoui サイトの素敵な例はこちら

私の問題は、表示/非表示メニューがすべての列で同じであることですが、個々の列の列メニューの奥深くに埋め込まれています。

ユーザーが複雑なドロップダウンをクリックする必要がないように、そのメニューを 1 か所だけ、おそらくテーブル ツールバーまたはフッターに表示したいと考えています。

4

2 に答える 2

2

これは少しトリッキーになり、プログラミングが必要になります。

ソリューションは以下に基づいています。

  1. ツールバーで各列のチェックボックスを定義します。これにはテンプレートを使用します。
  2. チェックボックスごとに、現在の状態に応じて列を表示/非表示にするハンドラーを定義します。

テンプレート定義

<!-- language: lang-html -->
<script type="text/kendoui" id="template">
    <div>
        <label for='field-#= item.field #'>
            #= item.title ? item.title : item.field #
            <input type='checkbox' id='field-#= item.field #' checked onclick='hideColumn("#=idx#")'>
        </label>
    </div>
</script>

ここで、グリッド定義で、ツールバーが関数を実行した結果であることを定義します。

<!-- language: lang-json -->
toolbar   : toolbarGenerator,

そしてtootbarGeneration次のとおりです。

function toolbarGenerator() {
    var template = kendo.template($("#template").html());
    var toolbar = "";
    var grid = $("#grid").data("kendoGrid");
    $.each(grid.columns, function (idx, item) {
        toolbar += template({ idx : idx, item : item });
    });
    return toolbar;
}

これは、ツールバーを生成するためのテンプレートを適用するすべての列を反復処理します。

チェックボックスの変更のイベント ハンドラーは次のとおりです。

function hideColumn(col) {
    var grid = $("#grid").data("kendoGrid");
    if (grid.columns[col].hidden) {
        grid.showColumn(+col);
    } else {
        grid.hideColumn(+col);
    }
}

そしてJSFiddleはこちらhttp://jsfiddle.net/OnaBai/GerEN/1/

于 2013-10-11T21:19:21.693 に答える