このトピックでは、igTree™ コントロールで選択を構成する一般的な方法を説明します。
このトピックは、以下のセクションで構成されます。
以下の表は、このトピックを理解するために必要な前提条件です。
| 前提条件タイプ | コンテンツ |
|---|---|
| トピック | 「igTree を使用した作業の開始」というトピックを最初にお読みください。 |
| 外部リソース | まず jQuery bind() API 記事を読む必要があります。jQuery live() API |
以下の表は、igTree コントロールの構成可能なビヘイビアーを示しています。
| 構成可能な動作 | 構成の詳細 | 構成プロパティ |
|---|---|---|
| チェックボックスを構成する |
igTree コントロールは bi-state チェックボックスと tri-state チェックボックスをサポートします。tri-state チェックボックスが有効な場合、親ノードはその子がすべてオン、すべてオフ、または部分的にオンになっているかどうか反映するために動的に更新します。
|
|
| オンにされたノードを取得する |
igTree コントロールは、オンにされたすべてのノード、オフにされたすべてのノード、および部分的に選択されたノードを取得する API を備えています。
|
|
| 選択イベントとチェックボックス イベントを処理する | 選択イベントをキャプチャし、発生している選択操作に対するロジックを実行します。 |
|
| ノードを選択/選択解除する | これらのメソッドを使用して、コードからモードを選択および選択解除します。 |
|
igTree コントロールは bi-state チェックボックスと tri-state チェックボックスをサポートします。tri-state チェックボックスが有効な場合、親ノードはその子がすべてオン、すべてオフ、または部分的にオンになっているかどうかを反映します。
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。プロパティは igTree のオプション経由でアクセスされます。
| 目的 | 使用するプロパティ: | それを次に設定... |
|---|---|---|
| bi-state チェックボックスを有効にする | checkboxMode | biState |
| tri-state チェックボックスを有効にする | checkboxMode | triState |
以下の画像は、以下の設定を行った後の tri-state チェックボックスを示しています。
| プロパティ | 設定 | プレビュー |
|---|---|---|
| checkboxMode | triState |  |
以下の画像は、以下の設定を行った後の tri-state チェックボックスを示しています。
| プロパティ | 設定 | プレビュー |
|---|---|---|
| checkboxMode | biState |  |
これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。
igTree は、オンにされたすべてのノード、オフにされたすべてのノード、および部分的に選択されたノードを取得する API を備えています。
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。プロパティは、igTree メソッドからアクセスされます。
| 目的 | このメソッドを使用: | 戻り値... |
|---|---|---|
| オンにされたすべてのノードを取得する | checkedNodes | ノードの配列 |
| オフにされたすべてのノードを取得する | uncheckedNodes | ノードの配列 |
| 部分的にオンにされたすべてのノードを取得する | partiallyCheckedNodes | ノードの配列 |
以下のコードは、以下の結果としてオンにされたすべてのノードを取得する方法を示しています。
| メソッド | 戻り値... |
|---|---|
| checkedNodes | ノードの配列 |
HTML と ASPX の場合:
var nodes = $("#tree").igTree("checkedNodes");
選択イベントとチェックボックス イベントを処理することで、これらの操作に対するカスタム ロジックを実行できます。これらのイベントは、ウィジェットが bind または live jQuery 関数を使用して jQuery またはクライアントで初期化されるときに構成できます。
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。プロパティは、igTree イベントからアクセスされます。
| 目的 | 使用するプロパティ: | それを次に設定... |
|---|---|---|
| 選択操作の前にイベントを処理する | selectionChanging | function() |
| 選択操作の後にイベントを処理する | selectionChanged | function() |
| チェックボックス操作の前にイベントを処理する | nodeCheckstateChanging | function() |
| チェックボックス操作の前にイベントを処理する | nodeCheckstateChanged | function() |
以下のコードは、以下を使用して igTree のインスタンス化に選択を構成する方法を示しています。
| プロパティ | 設定 |
|---|---|
| selectionChanged | function(evt, ui){ } |
| nodeCheckstateChanged | function(evt, ui){ } |
HTML の場合:
$("#tree").igTree({
dataSource: data,
checkboxMode: "triState",
bindings: {
textKey: 'Text',
childDataProperty: 'Nodes'
},
selectionChanged: function (evt, ui) {
},
nodeCheckstateChanged: function (evt, ui) {
}
});
以下のコードは、jQuery bind 関数と live 関数を使用して選択イベントとチェックボックス イベントを処理する方法を示しています。イベントの型は igTree をイベント名の先頭に付加して、小文字の文字列で構築します。
HTML の場合:
$("#tree").bind("igtreeselectionchanging", function (evt, ui) {
});
$("#tree").live("igtreenodecheckstatechanged", function (evt, ui) {
});
以下のコードは、イベント ハンドラー関数から false を返すことで、選択操作をキャンセルする方法を示しています。igTree の -ing 関数に同じアプローチを使用できます。このコード例では、キャンセルは選択を行うかどうかを判断するアプリケーション ロジックのブール値結果を表します。
HTML の場合:
$("#tree").live("igtreenodecheckstatechanging", function (evt, ui) {
if (cancel == true)
return false;
});
以下は、その他の役立つトピックです。
オンラインで表示: GitHub