Home > Web Front-end > JS Tutorial > Application of layer-order traversal in TreePanel of ExtJs_extjs

Application of layer-order traversal in TreePanel of ExtJs_extjs

WBOY
Release: 2016-05-16 18:44:13
Original
1080 people have browsed it

The principle is very simple, it is a hierarchical traversal of the tree, and the work is completed when the first leaf node is encountered during the traversal process.

The effect is as follows:

The code is as follows:

Copy code The code is as follows:

var currentRootNode = null; //The currently selected root node
function NodeClass()
{ //Define a node class
var nodeValue = null;
var nextNode = null ;//Next node
}
function InitQueue(queue)
{ //Initialize a queue
queue = new NodeClass();//The head node is empty
return queue;
}
function Empty(queue)
{ //Determine whether a queue is empty
var returnValue = false;
if(queue.nextNode == null)
{
returnValue = true;
}
return returnValue;
}
function EnQueue(queue,x)
{ //enqueue operation
var returnValue = queue;
var currentNode = queue;//Head node
while(currentNode.nextNode != null)
{//current until the last element is reached
currentNode = currentNode.nextNode; //
}
var tempNode = new NodeClass(); //Generate a new element with value X
tempNode.nodeValue = x;
currentNode.nextNode = tempNode; //Insert to the end
return returnValue; >}
function DeQueue(queue)
{ //Dequeue operation
var returnValue = null;
if(queue.nextNode != null)
{ //If the queue is not empty
if(queue.nextNode.nextNode == null)
{ //If it is the last element (even if the head of the queue is the tail of the queue, there is only one element)
returnValue = queue.nextNode.nodeValue; // Get the value of the element
queue.nextNode = null;//Set the nextNode of the queue of the head pointer to NULL
}
else
{
returnValue = queue.nextNode.nodeValue; / /Get the value of the element
queue.nextNode = queue.nextNode.nextNode; //Assign the pointer of the second element to the nextNode of the queue, which is equivalent to deleting the first element
}
}
return returnValue; //Return the value of the first deleted element
}
function GetHead(queue)
{ //Get the value of the queue head element
return queue.nextNode. nodeValue;
}
function Clear(queue)
{ //Clear a queue
queue.nextNode = null;
queue.nodeValue = null;
}
function Current_Size (queue)
{ //Get the size of the current queue
var returnValue = 0;
var currentNode = queue.nextNode; //Header node
while(currentNode != null)
{ //Calculate from beginning to end
returnValue;
currentNode = currentNode.nextNode; //Point to the next element
}
return returnValue; //Return size
}
function findFirstCheafNode ()
{
var childNodes = null;
var targetNode = null;//The target leaf node to be found
var queue = null;//Auxiliary queue
queue = InitQueue(queue );//Initialize the queue
queue = EnQueue(queue,currentRootNode);//Enter the root node into the queue
while (!Empty(queue))
{//As long as the queue is not empty
node = DeQueue(queue);//Dequeue
if (node.hasChildNodes())
{//Non-leaf node
childNodes = node.childNodes;
//Their child nodes are from left to right Enter the queue in sequence
for (var i = 0,len = childNodes.length; i < len ; i)
{
queue = EnQueue(queue,childNodes[i]);
}
}
else
{//Find the first leaf node
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,
// auto create 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, // The root node is not allowed to be dragged
expanded : false
});
// Set the root node for the tree
tree.setRootNode(rootnode);
tree.render();
tree.on('click',function(node,event)
{//Query the first leaf node of the tree
currentRootNode = node;
var targetNode = findFirstCheafNode();
Ext.MessageBox.alert("info","The current root node is: " currentRootNode.text " and the first leaf node below it is: " targetNode.text);
});
}); var childNodes = null;
var targetNode = null;//The target leaf node to be found
var queue = null;//Auxiliary queue
queue = InitQueue(queue);//Initialization queue
queue = EnQueue(queue,currentRootNode);//Enter the root node into the queue
while (!Empty(queue))
{//As long as the queue is not empty
node = DeQueue(queue);//Dequeue
if (node.hasChildNodes())
{//Non-leaf nodes
childNodes = node.childNodes;
//Their child nodes are queued from left to right in sequence
for (var i = 0,len = childNodes.length; i < len ; i)
{
queue = EnQueue(queue,childNodes[i]);
}
}
else
{//Find the first leaf node
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,
// auto create 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, // The root node is not allowed to be dragged
expanded : false
});
// Set the root node for the tree
tree.setRootNode(rootnode);
tree.render();
tree.on('click',function(node,event)
{//Query the first leaf node of the tree
currentRootNode = node;
var targetNode = findFirstCheafNode();
alert("The current root node is: " currentRootNode.text " The first leaf node below it is: " targetNode.text);
});
});
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template