最近、初めてjQueryのようなjQueryのプラグインをjqGridとして「感じる」機会がありました。 このプラグインは多くの人に馴染みがあると思います。 しかし、RuNetにはその使用に関する多くの資料はありません。 まあ...私たちはそれを修正します！
そのため、jqGridは、Webアプリケーションでさまざまな種類のテーブルを作成するための非常に強力なプラグインです。 通常の2次元テーブルだけでなく、ネストされたテーブル（Excelピボットテーブルのようなもの）を持つテーブル、およびツリーも作成できます。 しかし、まず最初に、そしてこの記事では、グリッドの基本的な特性と「植樹」のプロセスを検討します。
基本的なプロパティ
便利なリンクは次のとおりです。
オフサイト開発者
ウィキとドキュメント非常に完全で便利な
デモプラグインには、グリッドをほぼ完全にカスタマイズするための膨大な数のパラメーターがあります。 たとえば、主なものを次に示します。
url-プロパティは、テーブルとツリーにデータを提供するソースを決定します。 テーブルまたはツリーの要素がスクリプトで直接ハードコードとして事前に作成されている場合を除き、すべての場合に必要です。 ほとんど誰もこのオプションを使用しないと思います））デフォルトでは、確立された形式のいずれかでデータを返すサーバー関数のアドレスが表示されます。
データ型 -プロパティは、データがサーバーから返される形式を示すだけです。 多くのユースケースがあります（これは別の記事の資料です）。 しかし、ほとんどの場合、値は「xml」または「json」を取ります。 これがおそらく不要な理由を説明してください。
mType-サーバーにリクエストを送信するGETまたはPOSTメソッドを決定します。 可能な値は「GET」（デフォルト）および「POST」です
treeGrid-グリッドがテーブルかツリーかを決定します。 真木、偽デフォルト
caption-テーブルのタイトル
colNames-インターフェイスに直接表示される列名。 文字列の配列。 配列に入力した順序で、列にはそのように名前が付けられます。
ExpandColumn- （treeGrid：trueのみ）列名（colModel-> name、以下を参照）を定義します。その内容はインターフェイスに表示されます。 つまり colModelでは複数の列を定義できますが、ツリーでは当然1列のみが表示され、定義します。
ExpandColClick- （
treeGridのみ：true）。 デフォルトでは、ノードはノード名の左側にある三角形をクリックすることでのみ展開できます。 ただし、このプロパティをtrueに設定すると、碑文自体をクリックして実行できます。 非常に便利ですので、誰でも使用することをお勧めします。
colModelは、プラグイン全体で最も重要な属性です。 各列のプロパティを定義します。
ツリーを
作成するために最も必要なものをリストし
ます 。
name-選択した行の特定の列またはセルにアクセスできる名前。 列のインターフェイス名と一致しない場合があります。
keyはブール値です。 テーブルまたはツリーの行のIDがサーバーから返されない場合に必要です。 trueに設定されている場合、文字列のid属性はこのフィールドの値を取ります。
hidden-この列を表示するか非表示にするかを決定するブールプロパティ。
resizable-列幅を変更できるかどうかを決定するブールプロパティ
次に、treeGridModelについて別に説明します。treeGridModelについては、プラグインを最も効果的に使用するために必要な知識と理解が必要です。
プロパティtreeGridModel
定義により、ツリーは、階層構造を持つ情報を表示するように設計されています。 したがって、このプロパティは、この情報をプラグインに提供できる2つのメソッドのいずれかを定義するだけです。
ここで、treeGridModelプロパティと密接に関連する別のプロパティ
treeReaderがあることに注意してください。 TreeReaderはcolModelプロパティを拡張します。 非表示のテーブルの最後に追加のユーティリティ列を自動的に追加します。 また、サーバーから送信されるデータには、これらの列の情報が含まれている必要があります。 したがって、treeGridModelの各値に対して、独自のtreeReaderが作成されます。 データ表現の一般的に定義された形式は、データベース理論で説明されており、多くの人によく知られています。
treeGridModelの各値を個別に検討します。
隣接 -階層データの最も単純でわかりやすい形式の表示を使用できます。 その本質は、各行について、そのネストのレベルと親要素の識別子が示されることです。 treeReaderは次のようになります。
treeReader = {<br> level_field: "level" , // , 0 <br> parent_id_field: "parent" , // , null <br> leaf_field: "isLeaf" , // <br> expanded_field: "expanded" // <br>} <br><br> * This source code was highlighted with Source Code Highlighter .
ご覧のとおり、ここではすべてが非常に簡単です。 主なことは、このデータを正しく転送することであり、すべてが正常に機能します。
ネストはデフォルト値です。 データ表示形式はより複雑ですが、ネストのレベルが高いツリーを操作する場合、隣接関係に比べていくつかの利点があります。 その本質は、要素に親要素が指定されているのではなく、分岐の開始点と分岐の終了点のブレークポイントをそれぞれ決定する左右のキーが指定されていることです。
treeReader : {<br> level_field: "level" ,<br> left_field: "lft" , // , <br> right_field: "rgt" , // , <br> leaf_field: "isLeaf" ,<br> expanded_field: "expanded" <br>} <br><br> * This source code was highlighted with Source Code Highlighter .
最初と最後の2つのプロパティは、隣接関係treeGridModelの対応するプロパティに似ています。
詳細については、
ネストされたセットおよび
隣接リストの次のリソースを参照することをお勧めします
例
次に、特定の例を使用して、プラグインの操作を検討します。 私たちは自動車愛好家であり、自動車ブランドと1つのブランドの異なるモデルを含むツリーを作成する必要があるとしましょう。 一般に、このようなものを取得したい
- 1）次のhtmlマークアップを挿入する必要があります
< div style ="width:180px;" > <br> < table id ="treeGrid" > <br> </ table > <br> </ div > <br><br> * This source code was highlighted with Source Code Highlighter .
ここのdivは完全にオプションであり、グリッドの幅を制限するだけです。 メイン要素は空のテーブル要素です。
- 2）グリッドの作成を担当する次のjQueryコードを追加します
$( '#treeGrid' ).jqGrid({
url: "cars_tree.xml" ,
datatype: "xml" ,
height: "auto" ,
mType: 'GET' ,
treeGridModel: 'adjacency' ,
colNames: [ "my_id" , "my_name" ],
colModel: [
{ name: "id" , width: 1, hidden: true , key: true },
{ name: "name" }
],
treeGrid: true ,
caption: "" ,
ExpandColumn: "name" ,
ExpandColClick: true ,
autowidth: true
});
* This source code was highlighted with Source Code Highlighter .
ご覧のとおり、cars_tree.xmlファイルのxmlデータをプラグインに提供する必要があります。このファイルでは、ツリー構造が隣接リストとして表示されます 。
- 3）これは、xmlファイルの外観です
< rows > <br> < row > <br> < cell > 0 </ cell > <br> < cell > </ cell > <br> < cell > 0 </ cell > <br> < cell ></ cell > <br> < cell > false </ cell > <br> < cell > false </ cell > <br> </ row > <br> < row > <br> < cell > 1 </ cell > <br> < cell > Honda </ cell > <br> < cell > 1 </ cell > <br> < cell > 0 </ cell > <br> < cell > false </ cell > <br> < cell > false </ cell > <br> </ row > <br> < row > <br> < cell > 2 </ cell > <br> < cell > Civic </ cell > <br> < cell > 2 </ cell > <br> < cell > 1 </ cell > <br> < cell > true </ cell > <br> < cell > true </ cell > <br> </ row > <br> < row > <br> < cell > 3 </ cell > <br> < cell > Cr-v </ cell > <br> < cell > 2 </ cell > <br> < cell > 1 </ cell > <br> < cell > true </ cell > <br> < cell > true </ cell > <br> </ row > <br> < row > <br> < cell > 4 </ cell > <br> < cell > Hummer </ cell > <br> < cell > 1 </ cell > <br> < cell > 0 </ cell > <br> < cell > false </ cell > <br> < cell > false </ cell > <br> </ row > <br> < row > <br> < cell > 5 </ cell > <br> < cell > H2 </ cell > <br> < cell > 2 </ cell > <br> < cell > 4 </ cell > <br> < cell > true </ cell > <br> < cell > true </ cell > <br> </ row > <br> < row > <br> < cell > 6 </ cell > <br> < cell > Lada </ cell > <br> < cell > 1 </ cell > <br> < cell > 0 </ cell > <br> < cell > true </ cell > <br> < cell > false </ cell > <br> </ row > <br> </ rows > <br><br> * This source code was highlighted with Source Code Highlighter .
グリッドに何が渡されるかを検討します...各行の最初の2つのセルは、colModelに登録した2つの列に対応しています。 IDと名前。 残りの4つはtreeColModelのtreeReaderに対応します： 'adjacency'、つまり 3番目のセル—ネストレベル、4番目のセル—親要素のID、5番目のセル—このセルが展開されるかどうか、6番目—グリッドのロード直後に開かれるかどうか。
- 4） ネストされたセットの形式で提示されたxml-dataに基づいてツリーを構築する必要がある場合、スクリプト内の1行のコードのみを変更する必要があります。
treeGridModel: 'adjacency' , <br><br> * This source code was highlighted with Source Code Highlighter .
に置き換える
treeGridModel: 'nested' , <br><br> * This source code was highlighted with Source Code Highlighter .
treeGridModelのネストはデフォルト値であるため、削除するだけです。
そして、xmlファイルは次のようになります。
< rows > <br> < row > <br> < cell > 0 </ cell > <br> < cell > </ cell > <br> < cell > 0 </ cell > <br> < cell > 1 </ cell > <br> < cell > 14 </ cell > <br> < cell > false </ cell > <br> < cell > false </ cell > <br> </ row > <br> < row > <br> < cell > 1 </ cell > <br> < cell > Honda </ cell > <br> < cell > 1 </ cell > <br> < cell > 2 </ cell > <br> < cell > 7 </ cell > <br> < cell > false </ cell > <br> < cell > false </ cell > <br> </ row > <br> < row > <br> < cell > 2 </ cell > <br> < cell > Civic </ cell > <br> < cell > 2 </ cell > <br> < cell > 3 </ cell > <br> < cell > 4 </ cell > <br> < cell > true </ cell > <br> < cell > true </ cell > <br> </ row > <br> < row > <br> < cell > 3 </ cell > <br> < cell > Cr-v </ cell > <br> < cell > 2 </ cell > <br> < cell > 5 </ cell > <br> < cell > 6 </ cell > <br> < cell > true </ cell > <br> < cell > true </ cell > <br> </ row > <br> < row > <br> < cell > 4 </ cell > <br> < cell > Hummer </ cell > <br> < cell > 1 </ cell > <br> < cell > 8 </ cell > <br> < cell > 11 </ cell > <br> < cell > false </ cell > <br> < cell > false </ cell > <br> </ row > <br> < row > <br> < cell > 5 </ cell > <br> < cell > H2 </ cell > <br> < cell > 2 </ cell > <br> < cell > 9 </ cell > <br> < cell > 10 </ cell > <br> < cell > true </ cell > <br> < cell > true </ cell > <br> </ row > <br> < row > <br> < cell > 6 </ cell > <br> < cell > Lada </ cell > <br> < cell > 1 </ cell > <br> < cell > 12 </ cell > <br> < cell > 13 </ cell > <br> < cell > true </ cell > <br> < cell > false </ cell > <br> </ row > <br> </ rows > <br><br> * This source code was highlighted with Source Code Highlighter .
ご覧のとおり、各行のセルの数は1つ増えました。 これはtreeReaderの変更によるものです 。
行の最初の2つのセルは、colModelの値と同じです。 3番目のセル（ネストレベル、4番目と5番目）-ブランチの開始と終了を決定します（上記のリンクでこれについて詳しく読むことができます）、6番目と7番目-開くかどうかも決定しますノードと、ツリーのロード時に開かれたかどうか。
おわりに
この記事では、jqGridプラグインを使用して階層データ構造のツリービューを作成する最も簡単な方法を検討しました。 これは、プラグインの多くの用途の1つです。 今後の出版物では、Webスプレッドシートを作成するためのこの強力なツールについて引き続き説明します。