The sixth day of learning YUI.Ext--About tree TreePanel (Part 2 asynchronous acquisition of nodes)

The sixth day of learning YUI.Ext--About tree TreePanel (Part 2 asynchronous acquisition of nodes)_YUI.Ext related

WBOY

Release： 2016-05-16 19:17:01

Original

1321 people have browsed it

The following will introduce how to asynchronously fetch all the nodes of a tree. The specific method is very different from the official synchronous fetching of nodes, especially in the id attribute of json. Here are some of my explorations, which may not be the best solution and need to be studied together by everyone.
The idea of asynchronous node retrieval is as follows:
1. Define an initialization node first (you can also not define it, depending on your personal needs)
2. yui-ext requests the server according to the node id and obtains the child nodes. Each attribute
3. Loop
Features: In the upper-level directory, whether the node has child nodes can be read in advance on the server side (isLeaf attribute in json), although the database will bear more pressure , but using count(*) will not cause too much burden (unless the query conditions are extremely complex), you can also not read, that is, set all isLeaf to false.
Problems:
1. Reload is not currently possible, that is, it is read again every time the node is opened.
2. There are still some problems with the style. The style of the child node cannot be set through node.childNodes[i]. Therefore, the style of the last level element cannot be changed (maybe the style is changed through other means?)
Example:
First give a piece of js code, which can be combined with the official demo (http://yui-ext. com/playpen/yui-ext.0.40/examples/tree/reorder.html) Take a look:
//Define the variable of the root id

Copy code The code is as follows:

var rootId = 1; 
var TreeTest = function(){ 
 // shorthand 
 var Tree = YAHOO.ext.tree; 

 return { 
 init : function(userName){ 
 var tree = new Tree.TreePanel('detailTree', { 
 animate:true, 
   //This dataUrl is the url used to initialize the tree, you You can also not write or Define a static json file, you can also write nothing and rely on the second url to be automatically generated, depending on the specific needs. Loader: new Tree.TreeLoader({dataUrl:'calendarDetail.do?method=getDayDetailJSON&parentId=' rootId}), 
 enableDD:true, 
 containerScroll: true 
 }); 

 // set the root no de 
 var root = new Tree.AsyncTreeNode({ 
 text: 'yui-ext', 
 draggable:false, 
 id:rootId 
 }); 
 tree.setRootNode(root); 

 //According to the current node id, Dynamically spell out the path to the request server 
                                                                                                                                                                                                                                          > tree.on('beforeload', function(node){ 
 tree.loader.dataUrl = 'calendarDetail.do?method=getDayDetailJSON&parentId=' node.id; 
 }); 

                                      // Here, a demonstration of a custom JSON usage (description is a custom JSON key) 
 // and how to define the style of a node (node.ui.textNode.title) 
 // You can look at the ui class 
 tree.on('beforeexpand', function(node){ 
 node.ui.textNode.style.title = 'red'; 
 alert(node.attributes.description); 
 });                                                      // false for not recursive (the default), false to disable animation 
 root.expand( ; 


 The code is as follows: 


[{"text":"Clothes", 
"id":"5", //Note: Here is the The ID of the node, which is used when connecting, is different from the official json. 
"leaf":true, 
"cls":"file", 

"description":"This is the clothing category "}] //This is all you need for customization
Gives the code logic snippet for java to generate json:
...

//list is the category set required by the passed in id List list= findBy("parentId", new Long(parentId.toString())); StringBuffer JSONStr = new StringBuffer(); //Declare json JSONStr.append("[") ; for(CostCategory i : list){

boolean isLeaf = isLeaf(i.getId()); //isLeaf() is used to determine whether there is a node with this id as parentId. The details are not given Out

 String icon = isLeaf?"file":"folder"; 
 String description = i.getCategoryDescription()==null?"":i.getCategoryDescription(); 
 //{"text" :"treedata.jsp","id":"treedata.jsp","leaf":true,"cls":"file"}, 
 JSONStr.append("{"text":"" 
 i.getCategoryName() "","id":"" 
 i.getId() "","leaf":" 
 isLeaf ","cls":"" 
 icon ""," description":"" 
 description ""},"); 
} 
JSONStr.deleteCharAt(JSONStr.lastIndexOf(",")); 
JSONStr.append("]"); 
System.out.println(JSONStr); 
out.print(JSONStr); //Output json 
…… 