Ext Js_javascript スキルを使用して動的ツリーのサンプルコードを生成する-jsチュートリアル-php.cn

Ext Js_javascript スキルを使用して動的ツリーのサンプルコードを生成する

WBOY

リリース： 2016-05-16 19:01:04

オリジナル

1135 人が閲覧しました

1. 要件

部門ツリーの生成が必要です。最初はルート部門のみがリストされます
部門ノードをクリックすると、部門の下にある直接のサブ部門が動的にロードされ、部門ノードが表示されます。展開されます
右クリックイベントをサポートするには部門ノードが必要です
2. 主なクラス

Ext JSの主なクラスは次の2つです。 :

Ext .tree.TreeNode
Ext.menu.Menu
関連 API は http://extjs.com/deploy/ext/docs/

3 を参照してください。 . コード例

1. まずテストページを見てください

コードをコピーしますコードは次のとおりです

TreePanel の並べ替え

< ;!-- 例の一般的なスタイル -->

< ;link rel="stylesheet" type="text/css" href="../shared/lib.css" />

< h1>次に、動的ツリーを生成する必要があります

2. スパニングツリー関数をもう一度見てみましょう

コードをコピーしますコードは次のとおりです:

/***********************************

ツリーを作成
by chb 
**** ********************************/ 
function createTree(n){ 


Ext.QuickTips.init(); 
var mytree=new Ext.tree.TreePanel({ 
el:"container", 
animate:true, 
title:"Extjs 動的ツリー"、
collapsible:true、
enableDD:true、
enableDrag :true、
rootVisible:true、
autoScroll:true、
autoHeight:true、
width: "30%", 
lines:true 
}); 

//ルートノード
var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"グループ会社", 
expanded:true 
}) ; 


for(var i=0;ivar sub1 =new Ext.tree.TreeNode({ 
id:i 1, 
text :"Subsidiary" (i 1), 
singleClickExpand:true, 
listeners:{ 
//リッスンclick events
"click":function(node){ 
myExpand(node ); 
}, 
//右クリックをリッスン
"contextmenu":function(node,e) { 
//リストの右クリック メニュー
menu=new Ext.menu.Menu([ 
{ 
text:"現在のノードを開く", 
icon:"list.gif", 
handler:function(){ 
myExpand(node); 
} 
 }, 
{ 
text:"現在のノードを編集", 
icon:"list.gif ", 
handler:function(){ 
alert(node.id); 
 } 
}, 
{ 
text:"現在のノードを削除", 
icon: "list.gif", 
handler:function(){ 
alert(node.id) ; 
} 
}]); 
// 現在の場所に表示します
 .showAt(e.getPoint()); 
} 
} 
}); 
root.appendChild(sub1) 
mytree.setRootNode(root);//ルート ノードを設定します 
mytree.render();//render() を忘れないでください。そうしないと表示されません 
} 


3. 子ノードを展開するコード

コードをコピーコードは次のとおりです:/******************************************

ノードを展開

** ***************************************/
function myExpand(node){
if(node.id=='1'){
if(node.item(0 )==unknown){
node.appendChild(new Ext.tree .TreeNode({
id:node.id '1',
text:node.text "長男",
hrefTarget:"mainFrame",
listeners:{//Listening
"click":function(node,e){
expand2(node)
}
}
} ));
}

node.expand ();

}else if(node.id=='2'){
node.appendChild(new Ext.tree.TreeNode({
id:node.id ' 2'、
text:node.text "長男"、
hrefTarget: "mainFrame"、
リスナー:{//Listening
"click":function(node){
Expand2(node)
}
}
}));
}else{
alert (node.id "これ以上のサブ部門はありません");

読者は上記のコードを自分で実行すると、次の現象がわかるでしょう。「子会社 1」を何回クリックしても、「子会社 1 の長男」というノードが 1 つだけ表示され、毎回「子会社 1」が表示されます。「2」をクリックすると、「子会社の長男2」ノードが追加されるのはなぜでしょうか。

クリックするたびにmyExpand関数がトリガーされ、「補助1」にnode.item(0)==unknownの判定が追加されるためです。
つまり、この部門の下にサブ部門がない場合はサブ部門がロードされ、そうでない場合は展開されるだけで再ロードされません。

それでは、眠いので詳しくは説明しませんo(∩_∩)o…ははは