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

1. 要件

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

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

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

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

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

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

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

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








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

> ;

> ;

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…ははは