Ext Js_javascript 기술을 사용하여 동적 트리 예제 코드 생성-JS 튜토리얼-php.cn

Ext Js_javascript 기술을 사용하여 동적 트리 예제 코드 생성

WBOY

풀어 주다： 2016-05-16 19:01:04

원래의

1135명이 탐색했습니다.

1. 요구사항

부서 트리 생성이 필요합니다. 처음에는 루트 부서만 나열됩니다.
부서 노드를 클릭하면 부서 아래 직속 하위 부서가 동적으로 로드되고 부서 노드가 표시됩니다. 확장됩니다
오른쪽 버튼을 클릭하면 해당 작업 메뉴가 나열됩니다.
2. 주요 클래스

여기에는 크게 Ext JS의 두 가지 클래스가 있습니다. :

Ext .tree.TreeNode
Ext.menu.Menu
관련 API는 http://extjs.com/deploy/ext/docs/

3을 참조하세요. . 코드 예시

1. 먼저 테스트 페이지를 살펴보세요

코드를 복사하세요 코드는 다음과 같습니다. 다음:

TreePanel 재정렬

< h1>이제 동적 트리를 생성해야 합니다

2. 스패닝 트리 기능 다시 살펴보기

코드 복사 코드는 다음과 같습니다.

/*********************************** 
트리 만들기
by chb 
**** ********************************/ 
function createTree(n){ 


Ext.QuickTips.init(); 
var mytree=new Ext.tree.TreePanel({ 
el:"container", 
animate:true, 
title:"Extjs 동적 tree", 
collapsible:true, 
enableDD:true, 
enableDrag :true, 
rootVisible:true, 
autoScroll:true, 
autoHeight:true, 
너비: "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 :"자회사" (i 1), 
singleClickExpand:true, 
리스너:{ 
//듣기 클릭 이벤트
"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 )==undefine){
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(노드)
}
}
}));
}else{
alert (node.id "더 이상 하위 부서가 없습니다.")
}
}

독자들은 위 코드를 직접 실행해 보면 다음과 같은 현상을 발견할 수 있습니다. "자회사 1"을 몇 번이나 클릭해도 "자회사 1의 첫째 아들" 노드 하나만 나열되고, 매번 "자회사 1"이 나열됩니다. "2를 클릭하면" "자회사 2의 첫째 아들" 노드가 추가됩니다. 이유는 무엇입니까?

클릭할 때마다 myExpand 함수가 실행되고 node.item(0)==undefed라는 판단이 "자회사 1"에 추가되기 때문입니다.
즉, 이 부서 아래에 하위 부서가 없으면 하위 부서가 로드되고, 그렇지 않으면 확장만 되고 다시 로드되지는 않습니다.

그럼 여기서 그만하자.