igTreeGrid のページング機能は、igGrid のページング機能が拡張されています。階層データを表示するようにカスタマイズされているだけではなく、igTreeGrid に固有の追加の API オプションやメソッドも含まれています。
階層データを表示するため、追加のページング モードが追加され、現在および前のページの親子コンテキストも提示されます。
igTreeGrid には、データのルート レベルまたはすべてのデータ レベルを操作する 2 つのページング モードがあります。
ページングの mode オプションは、この機能を制御します。デフォルトで、このオプションはルート レベルのレコードのみを操作するように設定されています。デフォルト モードでは、行の展開または縮小によって表示される行を変更しても、ページ数には影響しません。
ルート レベルでのページング操作では、ルート行のみがページングされ、子行はページングに影響されません。ルート行を展開すると、現在のページにそのすべての子行が描画されます。
次の例では、配列の flatDS は 4 つのルート レベルの行のみを持ちます。
$("#treegrid").igTreeGrid({
dataSource: flatDS,
primaryKey: "employeeID",
foreignKey: "PID",
features: [{
name: 'Paging',
mode: 'rootLevelOnly'
}]
});
表示されるすべてのレコードにページングを適用するには、mode を allLevels に設定します。このモード設定は、データ内の位置にかかわらず、表示されるすべてのレコードに対してページングを適用します。allLevels モードは、ページングを動的に制御します。たとえば、行の展開や縮小により使用可能なページ数が変化します。
$("#treegrid").igTreeGrid({
dataSource: flatDS,
primaryKey: "employeeID",
foreignKey: "PID",
features: [{
name: 'Paging',
mode: 'allLevels'
}]
});
子データが次のページに続き (ページング モードが「allLevels」に設定されている場合)、そのページに跨る子レベルの行にコンテキストを取り込むことが必要なシナリオの場合、TreeGridPaging 機能に導入された追加の contextRowMode オプションで、子レベルの行の親行の情報を含むコンテキスト行をグリッド ヘッダーの下に描画することができます。 「none」、「parent」、「breadcrumb」の 3 つの選択できるモードがあります。
デフォルトで、このオプションは「none」に設定されています。この場合、コンテキスト行は描画されません。
スクリーンショットでは、最上行は子行ですが、その親行は前のページにあります。このモードの場合、現在のページのコンテキストから親行を特定する方法はありません。
contextRowMode を「parent」に設定すると、直近の親行に関する情報を含むコンテキスト行が表示されます。このモードは、階層があまり深くなく、直近の親から子行のコンテキストが比較的得られやすい場合に役立ちます。
複雑な階層のコンテキストをより詳細に表示する場合は、「breadcrumb」モードが使用できます。このモードは、祖先から現在の子行までの完全なパスを描画します。デフォルトで、プライマリ キーの値を使用して、現在の行までのブレッドクラム パスがビルドされます。
表示されるブレッドクラムの変更を許可する追加オプション があります (contextRowMode が「breadcrumb」に設定されている場合にのみ適用)。
breadcrumbKey - ブレッドクラム トレイルに表示する先祖の列キーを設定します。デフォルトで、プライマリ キーの列を使用します。
breadcrumbDelimiter - ブレッドクラム トレイル内の先祖と先祖の間にデリミターを設定します。デリミターのディフォルトは「>」です。
コンテキスト行全体の描画は、renderContextRowFunc オプションを使用して手動で処理することができます。このオプションでは、コンテキスト行の描画を処理するカスタム関数を設定できます。
この関数には、4 つの引数があります。
dataRow - コンテキスト行を定義する現在のデータ行。
$textArea - コンテキスト行のテキスト領域
parents - 現在のデータ行の一連の親。
contextMode - 現在のコンテキスト モード。
この関数は次のいずれかを返します。コンテキスト行のテキスト領域に挿入される文字列 (html)、false の場合は空の文字列または何も返さない。false の場合は、$textArea 引数を使用して、その内容をテキスト領域に直接追加できます。
次に示す例ではどちらも、コンテキスト行の内容を変更できます。
カスタム文字列を返す:
renderContextRowFunc: function(dataRow, $textArea, parents, mode) {
var contextRowText = "<div>";
$(parents).each(function(index) {
contextRowText += "<div> Parent " + index + " :" + this.row["firstName"] + " " + this.row["lastName"] + "</div>";
});
contextRowText += "</div>";
return contextRowText;
}
textArea の内容を直接変更する:
renderContextRowFunc: function(dataRow, $textArea, parents, mode) {
var contextRowText = "<div>";
$(parents).each( function(index) {
contextRowText += "<div> Parent "+ index + " :" + this.row["firstName"] + " " + this.row["lastName"] + "</div>";
});
contextRowText += "</div>";
$textArea.html(contextRowText);
}
どちらも同じ結果になります。
igTreeGrid の機能を使用したリモート操作実行における実装の詳細と概要を説明します。オンラインで表示: GitHub