複数列ヘッダーを持つjQueryグリッド

複数列ヘッダーを持つjQueryグリッド

この機能により、列とレイアウトの非常に単純な (そして論理的に) セットアップすることで、共通の親の下で列ヘッダーを視覚的に、場合によっては機能的にグループ化できます。

9min read

この機能により、列とレイアウトの非常に単純な (そして論理的に) セットアップすることで、共通の親の下で列ヘッダーを視覚的に、場合によっては機能的にグループ化できます。

jQuery Grids Multi-Column Headersそれ自体は主に視覚的なものかもしれませんが、Ignite UIグリッドと階層グリッドの他の部分/モジュールがそれを認識しているので、非常に興味深い相互作用を持つことができます。これらは実際のウィジェット コードの一部ではない可能性がありますが、他の機能を使用しているときに列ヘッダーをグループ化することの副産物です。以下では、参照用にさらにいくつかの機能名を 1 か所で紹介します。

Quick Start

結局のところ、どこかから始める必要があり、私のように API に直接アクセスして機能をチェックする場合は、少しショックを受けることになります。現状では、複数列ヘッダーウィジェットは実際にはあまり機能しません。では、どのように設定すればよいのでしょうか?まあ、ウィジェット自体をオン/オフスイッチとして考え始めると(まさにそれが機能します)、列定義が常にあった場所にあると、すべてが非常に合理的になります。コラムコレクションで!独自のコレクションが 'group' プロパティに割り当てられているものを追加するだけです。内部には、グループなどを含む列を増やすことができます – この機能により、事実上無制限のネストされたヘッダーが可能になります。次に、キーや行スパンなどの追加のプロパティもいくつかあります。ASP.NET MVC Helper を含む部分的なスニペット (重要な行は 5 と 6):

@(Html.Infragistics().Grid<MultiColumnHeaders.Models.Department>()
    .Columns(column =>
    {
        column.For(x => x.DepartmentID).HeaderText("DEP Id");
        column.MultiColumnHeader("Dep").HeaderText("Dep")
            .Group(innerColumn =>
            {
                innerColumn.For(x => x.Name).HeaderText("Name");
                innerColumn.For(x => x.GroupName).HeaderText("GroupName");
            });
    })
    //...

そして、それはスクリプト(9行目)と同じくらい簡単です。

$('#grid').igHierarchicalGrid({
    columns: [{
        key: 'DepartmentID',
        dataType: 'number',
        headerText: 'DEP Id'
    }, {
        key: 'Dep',
        headerText: 'Dep',
        group: [{
            key: 'Name',
            dataType: 'string',
            headerText: 'Name'
        }, {
            key: 'GroupName',
            dataType: 'string',
            headerText: 'GroupName'
        }]
    }],
    //..

上記のレイアウトを機能させるには、それぞれのコレクションに「MultiColumnHeaders」機能を追加するだけです。

//....
.Features(feature => feature.MultiColumnHeaders().Inherit(true))
//  ---- OR -----
 features: [{
            name: 'MultiColumnHeaders'
        }],
//...

階層グリッドに関しては、通常どおり、親のコレクションで機能を定義し、継承を許可するか、特定のレイアウトに追加するかの 2 つのオプションがあります。全体として、ヘルプでigGrid複数列ヘッダーのトピックを確認できますが、かなり詳細なガイドがすでに含まれています。または、以下のサンプルとデモのセクションを参照して、例🙂で学ぶこともできます

そんなに早くありません！

まず、グリッドテーブルのTHEADのマークアップを変更する機能が正確に何をするのかを少し理解しましょう。複数列ヘッダー機能は、すぐに使える配置を提供します -予想通り、その多くは実際の列ヘッダーを配置する完璧な方法を見つけることを中心に展開します - "colspan "と行スパンを設定し、後者は微調整できます(詳細は後述)。本当に必要な設定は、グループコレクションだけです。そうでなければ、ヘッダーが「未定義」と書かれてしまうので、ヘッダーテキストも本当に便利だと思います。

次に、鍵もあります。通常の列設定とは異なり、この場合のキーはデータ プロパティに対応していません。では、なぜそれが必要なのでしょうか?複数列のヘッダーにキー(識別子を兼ねる)を割り当てないと、グリッドが独自に思いつくものが何でも行き詰まってしまいます。つまり、識別子が生成され (番号 ID が増加)、これらが期待どおりに割り当てられるとは限りません。さらに、おそらく、複数列の識別子/キーを受け入れるいくつかのメソッド(特に非表示や移動などの列を操作するAPI)を見たことがあるでしょう。キーがないと、奇妙な動作が発生することがあるため、キーも必要であると考えるのが最善です。さらに、ヘッダーターゲティングを簡単に行う機会を逃したくありません。

レベルと id-s を持つ複数列ヘッダー用に生成された THEAD マークアップ

キーを定義すると、ヘッダーにも id-s (Ignite UIグリッドの ID と列の ID の組み合わせ) が割り当てられ、超高速で簡単なターゲティングに使用できます。これにより、これらのヘッダーは、"data-isheadercell" 属性が true に設定されたデータバインドされたヘッダーと一致します。

善と悪の列は、

'rowspan'プロパティは、基になるテーブルセルプロパティへの直接参照ですが、機能自体は行内のセルの配置を計算します(行にデータバインドヘッダーとグループヘッダーの両方が含まれることがあると予想される方法で、セルをスパンして配置するために)。つまり、ここにはいくつかの「落とし穴」があります。たとえば、以下のケース(一部の列は非表示になり、ショットに収まるように押しつぶされた列もあります)では、「レコード情報」グループヘッダーを元の1行スパンから2に設定して、子列を下に押し下げて残りの列に揃えます。

MUlti 列ヘッダーの rowspan プロパティの効果の例

すべての「実際の」ヘッダーをきちんとした行に揃えるだけという意図が、ヘッダーテーブル全体を拡大した結果になったことに注目してください。これにより、最後の 2 つの列ヘッダーが残りの列ヘッダーときれいな行に揃えられたため、実際にはマークアップの同じテーブル行に収まりました。そして、それらはテキストが多く、わずかに大きくなっていたため、行はそれらに合わせて拡張され、伸びが生じました。また、スペースを占有するものが他にない列や、残りのスペースに収まるのに十分なスペースがない列に行スパンを定義すると、レイアウトの歪みを避けるために他の場所で補正が必要になる可能性があります。一般的には、グリッドに頼ってそれを行うことをお勧めします。

API の詳細

​ドキュメントで適切に記載されているように、ヘッダーとそのグループを取得するには、機能自体のgetMultiColumnHeaders を使用する必要がありますが、 $(".selector").igGrid("option", "columns")を使用してigGridウィジェットの列コレクションを取得する場合と同様に、「実際の」もののみを取得し、グループ階層はありません。

階層グリッドの場合も同様ですが、理由が異なります。実際には、通常どおり列オプションをプルでき、グループヘッダーとその子が含まれますが、ヘッダー階層をチェックアウトする必要がある場合にのみ適しています。列/行スパン、識別子、レベルなどの追加情報については、再びgetMultiColumnHeadersメソッドに依存する必要があります。

奇妙なことにAPIが欠落している別のメソッドがありますが、ドキュメントには見つからず、私はそれについて言及するのが良いと思いました–それは "renderMultiColumnHeader"と呼ばれ、グリッドの初期化に提供するのとまったく同じ列コレクションを取ります。これを使用すると、実行時に複数列ヘッダーの配置を変更したり、何もせずに列を定義したりすることもできますが、グリッドの再バインドにコストがかかることに注意してください。使い方もかなり簡単です。

$('#Grid1').igGrid("renderMultiColumnHeader", [{
    key: 'DepartmentID',
    dataType: 'number',
    headerText: 'DEP Id'
}, {
    headerText: "Dep",
    group: [
    //...
    ]
}]);

APIに通常見られる他の設定があり、すべての列で共有されますが(ASP.NET MVCヘルパーではそれほど多くありません)、一般的には無視されます(テンプレート、フォーマッタなどはあまり意味がありません)。適用されるものの、まだ適用されないものもあります –たとえば、widthプロパティ。複数列ヘッダーの幅はグループによって決定され、幅を定義するには、子列に設定するだけです。

Styling

この機能は、CSS でターゲットにできるヘッダーに 1 つの特定のクラス ("ui-iggrid-multiheader-cell") を適用します。これにより、特定のスタイルでグループ ヘッダーを他のスタイルと区別できるようになりますが、これはデフォルトの Infragistics テーマに必要なものだと思います。実際には何でもできますが、微妙な下線は非常にうまくいくと判断したので(モダンUIテーマから完全に盗みました!)、次のスタイルを使用します。

.ui-iggrid th.ui-iggrid-multiheader-cell {
    border-bottom-color: #2cbdf9;
    border-bottom-width: 1px;
}
複数列ヘッダーのみを対象とするスタイルを適用する例

これに似たものが得られます。さらにグループがある場合に備えて、いくつかの擬似クラスを使用してスタイルを切り替えることもできますが、これはサンプルでも行っているので、以下で確認してください。

機能の相互作用

前回のブログですでに述べましたが、Column Movingはマルチヘッダーでうまく機能しています。ご想像のとおり、親ヘッダーをドラッグして、すべての子を一度に移動することもできます。では、他に何が面白いのでしょうか?

​非表示機能を使用すると、グループ全体を非表示にするために使用する素敵なアイコンがヘッダーに表示され、ネストされたすべての列が非表示になると親は消えます。また、列の 'hidden'プロパティを設定するだけで、デフォルトで非表示にすることができ、その部分はそれぞれの機能を機能させる必要さえありません(ただし、列を表示するためのUIとインタラクションがありません)。

列操作を実行する両方の機能の API メソッドは、キーの代わりに複数列ヘッダー識別子も受け入れます。

​サイズを変更すると、ユーザーは個々の列またはグループヘッダーの両方と対話でき、どちらも満足のいく反応が得られます - ネストされた列のサイズを変更すると親の幅が変更され、その逆も同様です。

UI に関しては、非表示と列移動はどちらも、ブログの一番上の画像に見られるように、対話用の独特のヘッダー アイコンを生成します。1 つの歯車アイコンに追加の特徴を蓄積するデータバインド列とは異なり、グループ列は上記の 2 つ以上をサポートしていないため、特徴セレクターは取得されません。一括実行に意味のある機能がグリッドに追加されるにつれて、これは変わる可能性があります (*ヒントヒント* もすぐに発生する可能性があります)。

ご意見をお聞かせくださいので、以下にコメントを残してください@DamyanPetev。​

そしていつものように、あなたはTwitterで私たちをフォローすることができます@Infragistics連絡を取り合うフェイスブック,Google+のそしてLinkedInの!

How To jQuery
デモを予約