jQueryのEasyUIツリーメニュー - ツリー遅延ロードのグリッドノード
時々、私たちは完全に階層ツリー・グリッド(TreeGrid)のデータとなっています。 また、ツリー・グリッド(TreeGrid)階層的な遅延ロードノードをしたいです。 まず、唯一の最上位ノードをロードします。 アイコンをクリックして、その子ノードをロードするためにノードを展開します。 このチュートリアルでは、不活性負荷特性グリッド(TreeGrid)でツリーを作成する方法を示しています。
ツリー・グリッドを作成します(TreeGrid)
<表のid = "テスト"タイトル= "フォルダブラウザ「クラス=" easyui-treegrid "スタイル="幅:700px;高さ:300ピクセル " データ・オプション= " URL:「データ/ treegrid_data.json」、 方法: 'get'が、 rownumbers:trueの場合、 idField:「ID」、 treeField:「名前」、 loadFilter:myLoadFilter "> <THEAD> <TR> <Thのフィールド= "名前"幅= "220">名前</目> <Thのフィールド= "サイズ"幅= "100" ALIGN = "右">サイズ</目> <Thのフィールド= "日付"幅= "150">更新日時</目> </ TR> </ THEAD> </表>
負荷子ノードを配置するには、各ノードが、私たちは「子供のプロパティの名前を変更する必要があります。 次のコードは、「子どものプロパティの名前の変更」children1」に示されているように。 あなたがノードを展開すると、私たちは、その子ノードのデータをロードするために 'APPEND'メソッドを呼び出します。
「LoadFilter 'コード
関数myLoadFilter(データ、PARENTID){ 関数にsetData(){ するvar藤堂= []; 以下のために(VAR I = 0; iはdata.lengthを<;私は++){ todo.push(データ[i])と、 } しばらく(todo.length){ varの各ノード= todo.shift(); {(node.children)の場合 node.state = '閉じ'; node.children1 = node.children。 node.children =未定義。 藤堂= todo.concat(node.children1)。 } } } setData(データ); VAR TG = $(この)。 varが= tg.treegrid( 'オプションを')付き合えません。 opts.onBeforeExpand =関数(行){ {(row.children1)の場合 tg.treegrid( 'APPEND'、{ 親:行[opts.idField]、 データ:row.children1 }); row.children1 =未定義。 tg.treegrid([opts.idField]行、 '展開'); } 未定義== row.children1を返します。 }; データを返します。 }