このトピックでは、igHierarchicalGrid™ の子グリッドを展開および縮小するための API の使用方法について説明します。
このトピックを理解するためには、以下のトピックを理解しておく必要があります。
このトピックは、以下のセクションで構成されます。
以下の表に、igHierarchicalGrid コントロールの、行の展開と縮小に関して構成可能な項目の一覧を示します。
以下の表は、このトピックで使用したコード例をまとめたものです。
例 | 説明 |
---|---|
コード例: 親グリッドのすべての行の展開 | ルート グリッドのすべての行を展開する方法を示します。 |
コード例: 親グリッドのすべての行の縮小 | ルート グリッドのすべての行を縮小する方法を示します。 |
コード例: 現在選択されている行の切り替え | ルート グリッドの現在選択されている行を切り替える方法を示します。 |
この例は、ルート グリッドのすべての行を展開する方法を示します。以下の例では次の関数が定義されています。
expandAllRowsOfGrid
: この関数は、渡されたグリッドのすべての行を展開します。この関数は、階層の任意のレベルで使用できます。expandAllRowsOfRootGrid
: この関数は、ルート グリッドのすべての行を展開します。この関数は、最上位グリッドの参照を取得し、expandAllRowsOfGrid
に渡します。JavaScript の場合:
function expandAllRowsOfGrid(grid) {
// expand each row in grid
$(grid.allRows()).each(function (index, element) {
$("#grid1").igHierarchicalGrid("expand", element);
});
}
function expandAllRowsOfRootGrid() {
// get the top level grid
var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
expandAllRowsOfGrid(parentGrid);
}
この例は、ルート グリッドのすべての行を縮小する方法を示します。以下の例では次の関数が定義されています。
collapseAllRowsOfGrid
: この関数は、渡されたグリッドのすべての行を縮小します。この関数は、階層の任意のレベルで使用できます。collapseAllRowsOfRootGrid
: この関数は、ルート グリッドのすべての行を縮小します。この関数は、最上位グリッドの参照を取得し、collapseAllRowsOfGrid に渡します。JavaScript の場合:
function collapseAllRowsOfGrid(grid) {
// collapse each row
$(grid.allRows()).each(function (index, element) {
$("#grid1").igHierarchicalGrid("collapse", element);
});
}
function collapseAllRowsOfRootGrid() {
// get the top level grid
var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
collapseAllRowsOfGrid(parentGrid);
}
この例は、ルート グリッドの現在選択されている行を切り替える方法を示します。以下の例では次の関数が定義されています。
toggleCurrentRowOfGrid
: この関数は、渡されたグリッドの現在の行を切り替えます。この関数は、階層の任意のレベルで使用できます。toggleCurrentRowOfRootGrid
: この関数は、ルート グリッドの現在の行を切り替えます。この関数は、最上位グリッドの参照を取得し、toggleCurrentRowOfGrid
に渡します。注: この例が動作するためには、
Selection
機能を有効にする必要があります。
JavaScript の場合:
function toggleCurrentRowOfGrid(grid) {
// get reference to current selected row
var row = $(grid).igGridSelection("selectedRow");
if (row) {
// toggle row
$("#grid1").igHierarchicalGrid("toggle", row.element);
}
}
function toggleCurrentRowOfRootGrid(grid) {
// get the top level grid
var parentGrid = $("#grid1").igHierarchicalGrid("root");
toggleCurrentRowOfGrid(parentGrid);
}
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
オンラインで表示: GitHub