ExtJs_extjs의 TreePanel에서 레이어 순서 탐색 적용

원리는 매우 간단하며 트리의 계층적 순회이며 순회 과정 중 첫 번째 리프 노드를 만나면 작업이 완료됩니다.

효과는 다음과 같습니다:

코드는 다음과 같습니다.

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

var currentRootNode = null; //현재 선택된 루트 노드
function NodeClass()
{ //노드 클래스 정의
var nodeValue = null
var nextNode = null; ;//다음 노드
}
function InitQueue(queue)
{ //큐 초기화
queue = new NodeClass();//헤드 노드가 비어 있습니다
return queue; 🎜>}
function Empty(queue)
{ //큐가 비어 있는지 확인
var returnValue = false
if(queue.nextNode == null)
{
returnValue = true;
}
return returnValue;
}
function EnQueue(queue,x)
{ //큐에 넣기 작업
var returnValue = queue; queue;//헤드 노드
while(currentNode.nextNode != null)
{//마지막 요소에 도달할 때까지의 전류
currentNode = currentNode.nextNode; //
}
var tempNode = new NodeClass(); //값이 X인 새 요소 생성
currentNode.nextNode = tempNode; //끝까지 삽입
return Value; >function DeQueue(queue)
{ //큐 제거 작업
var returnValue = null
if(queue.nextNode != null)
{ //큐가 비어 있지 않은 경우
if (queue.nextNode.nextNode == null)
{ //마지막 요소인 경우(큐의 선두가 꼬리의 경우에도 요소는 1개만 있음)
returnValue = queue. nextNode.nodeValue; // 요소 값 가져오기
queue.nextNode = null;//헤드 포인터 큐의 nextNode를 NULL로 설정
}
else
{
returnValue = queue.nextNode.nodeValue; //요소 값 가져오기
queue.nextNode = queue.nextNode.nextNode; //큐의 nextNode에 두 번째 요소의 포인터를 할당합니다. 이는 삭제와 동일합니다. 첫 번째 요소
}
}
return returnValue; //삭제된 첫 번째 요소의 값을 반환합니다.
}
function GetHead(queue)
{ //첫 번째 요소의 값을 가져옵니다. 대기열 헤드 요소
return queue.nextNode.nodeValue;
}
function Clear(queue)
{ //큐 지우기
queue.nextNode =
queue.nodeValue = null;
}
function Current_Size(queue)
{ //현재 대기열의 크기를 가져옵니다.
var returnValue = 0
var currentNode = queue.nextNode
while(currentNode != null)
{ //처음부터 끝까지 계산
returnValue;
currentNode = currentNode.nextNode; //다음 요소를 가리킴
}
return Value ; //반환 크기
}
function findFirstCheafNode ()
{
var childNodes = null;
var targetNode = null;//찾을 대상 리프 노드
var queue = null;//보조 큐
queue = InitQueue(queue );//큐 초기화
queue = EnQueue(queue,currentRootNode);//큐에 루트 노드를 입력합니다
while (!Empty (queue))
{//대기열이 비어 있지 않은 한
node = DeQueue(queue);//Dequeue
if (node.hasChildNodes())
{//Non- 리프 노드
childNodes = node.childNodes;
//자식 노드는 왼쪽에서 오른쪽으로 순서대로 대기열을 입력합니다.
for (var i = 0,len = childNodes.length; i < len ; i)
{
queue = EnQueue(queue,childNodes[i]);
}
}
else
{//첫 번째 리프 노드 찾기
return 노드;
}
}
}
Ext.onReady(function()
{
var tree = new Ext.tree.TreePanel({
el: 'treeDiv',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// TreeLoader 자동 생성
loader: new Ext.tree.TreeLoader({dataUrl:'Level1.txt'})
} );
var rootID = '0'
var rootnode = new Ext.tree.AsyncTreeNode( {
id : rootID,
text : 'Ministry of Railways',
draggable : false, // 루트 노드는 드래그할 수 없습니다
expanded : false
}); 🎜>// 트리의 루트 노드 설정
tree.setRootNode(rootnode);
tree.render()
tree.on('click',function(node,event)
{//트리의 첫 번째 리프 노드 쿼리
currentRootNode = node;
var targetNode = findFirstCheafNode()
Ext.MessageBox.alert("info","현재 루트 노드는 " currentRootNode .text " 및 그 아래의 첫 번째 리프 노드는 다음과 같습니다. " targetNode.text);
}) var childNodes = null;//대상 리프 노드 발견
var queue = null;//보조 큐
queue = InitQueue(queue);//초기화 큐
queue = EnQueue(queue,currentRootNode);//큐에 루트 노드 입력
while (!Empty(queue))
{//큐가 비어 있지 않은 한
node = DeQueue(queue);//Dequeue
if (node.hasChildNodes())
{//비리프 노드
childNodes = node.childNodes;
//그 하위 노드는 왼쪽에서 오른쪽으로 순서대로 대기됩니다.
for (var i = 0,len = childNodes.length; i < len i)
{
queue = EnQueue(queue,childNodes[i])
}
}
else
{//첫 번째 리프 노드 찾기
return node;
}
}
}
Ext.onReady(function()
{
var tree = new Ext.tree.TreePanel({
el: ' treeDiv',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// 자동 생성 TreeLoader
loader: new Ext.tree.TreeLoader({dataUrl:'Level1.txt'})
});
var rootID = '0';
var rootnode = new Ext.tree.AsyncTreeNode({
id : rootID,
text : 'Ministry of Railways',
draggable : false , // 루트 노드는 드래그할 수 없습니다.
expanded : false
})// 트리의 루트 노드를 설정합니다.
tree.setRootNode(rootnode); .render();
tree.on('click',function(node,event)
{//트리의 첫 번째 리프 노드 쿼리
currentRootNode = node;
var targetNode = findFirstCheafNode ();
Alert("현재 루트 노드는 " currentRootNode.text " 그 아래의 첫 번째 리프 노드는 " targetNode.text)
}); 🎜>