このトピックでは、igHierarchicalGrid™ の行とセルを選択および選択解除するための API の使用方法について説明します。
このトピックを理解するためには、以下のトピックを理解しておく必要があります。
このトピックは、以下のセクションで構成されます。
以下の表は、igHierarchicalGrid コントロールの構成可能な項目を示しています。
構成可能な要素 | メソッド |
---|---|
セル選択 | |
行の選択 | |
選択のクリア |
この例は、外部キーのリレーションにより子グリッド内のセルを選択する方法を示します。
productId
パラメーターは、外部キーのリレーションを表します。Product Id 列は、階層の最上位の 2 番目の列であることを仮定しています。rowIndex
パラメーターと colIndex
パラメーターは、選択されるサブグリッド内のセルを定義します。関数は、選択が表示されるように、子グリッドを展開します。
JavaScript の場合:
function selectCellByProductId(productId, rowIndex, colIndex) {
// get the parent grid
var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
// get all rows of the parent grid
var parentGridAllRows = parentGrid.allRows();
$(parentGridAllRows).each(function (index, row) {
// get the value of the product id column
// it is assumed that product id column is the second column
productIdCellVal = $(row.cells[1]).html();
// check to see if this is the searched product id
if (productIdCellVal === productId.toString())
// ... and expand it if it is
$("#grid1").igHierarchicalGrid("expand", row);
});
// get all expanded child grids
var childGrids = $("#grid1").igHierarchicalGrid("allChildren");
// select the cell by row and column indexes
$(childGrids).each(function(index, grid) {
$(grid).igGridSelection("selectCell", parseInt(rowIndex), parseInt(colIndex));
});
}
この例は、展開されているすべての子のすべての行を選択する方法を示します。
注: 複数選択が有効になっている必要があります。
JavaScript の場合:
function selectAllRowsOfExpandedChildren() {
// get all expanded child grids recursively
var childGrids = $("#grid1").igHierarchicalGrid("allChildren");
$(childGrids).each(function (index, grid) {
// get all rows of the child grid
var allRows = $(grid).igGrid("allRows");
$(allRows).each(function (index, row) {
// select each row
$(grid).igGridSelection("selectRow", index);
});
});
}
この例は、外部キーのリレーションにより子グリッド内のセルを選択解除する方法を示します。
注: 複数選択が有効になっている必要があります。
productId
パラメーターは、外部キーのリレーションを表します。Product Id 列は、階層の最上位の 2 番目の列であることを仮定しています。rowIndex
パラメーターと colIndex
パラメーターは、選択されるサブグリッド内のセルを定義します。最上位のグリッド行の productId
が検索されます。一致する場合には、その行から data-id 属性が抽出されます。子グリッド ID 属性が組み立てられ、組み立てられた ID を使用して、グリッドに対して deselectCell
メソッドが実行されます。
JavaScript の場合:
function deselectCellByProductId(productId, rowIndex, colIndex) {
var data_id;
// get the parent grid
var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
// get all rows of the parent grid
var parentGridAllRows = parentGrid.allRows();
$(parentGridAllRows).each(function (index, row) {
// get the value of the product id column
// it is assumed that product id column is the second column
productIdCellVal = $(row.cells[1]).html();
// check to see if this is the searched product id
if (productIdCellVal === productId.toString()) {
data_id = $(row).attr("data-id");
}
});
// get the child layout key
var childLayoutKey = $("#grid1").igHierarchicalGrid("option", "columnLayouts")[0].key;
// define the search id of the child grid
var childGridId = "#grid1_" + data_id + "_" + childLayoutKey + "_child";
// deselecting the cell
$(childGridId).igGridSelection("deselectCell", parseInt(rowIndex), parseInt(colIndex));
}
この例では、第 2 レベルの子グリッドの選択を再帰的にクリアする方法を示します。
以下の例は、最上位グリッドのすべての行を繰り返し処理し、行が展開されているかどうかを確認します。展開されている行について、clearSelectionAllChildren
メソッドを呼び出します。最上位グリッドの選択と最初のレベルの展開されたグリッド選択は影響を受けません。
JavaScript の場合:
function clearSelectionOfSecondLevelChildrenRecursively() {
var expanded;
// get the parent grid
var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
// get all rows of the parent grid
var parentGridAllRows = parentGrid.allRows();
$(parentGridAllRows).each(function (index, row) {
expanded = $("#grid1").igHierarchicalGrid("expanded", row);
// check to see if the row is expanded
if (expanded)
// ... and clear its child grids selection recursively
$(row).igGridSelection("clearSelectionAllChildren", false, true);
});
}
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub