Learning YUI. Ext day 6 -- about tree TreePanel (Part2 asynchronous node acquisition) _ YUI. Ext

Learn about YUI. ext day 6-about tree TreePanel (Part2 asynchronous node acquisition) The following describes how to asynchronously retrieve all nodes of a tree. The specific method is very different from the official synchronous node retrieval method, in particular, here are some of my explorations on the json id attribute, which may not be the best solution. We need to study it together.
The idea of asynchronous node retrieval is as follows:
1. First define an initialization node (or not, depending on your needs)
2. yui-ext requests the server based on the node id to obtain the attributes of the subnode.
3. Loop
Features: in the upper-level directory, the server can read the node's sub-nodes in advance (isLeaf attribute in json). Although the database is under more pressure, however, using a count (*) does not cause too much burden (unless the query conditions are extremely complex). You can also leave it unread, that is, set all isLeaf to false.
Problem:
1. Currently, reload cannot be performed, that is, each time a node is opened, it is read again.
2. There are still some style problems. You cannot set the style of the subnode through node. childNodes [I], so you cannot change the style of the last-level element (maybe you want to change the style through another way ?)
Example:
First give a piece of js Code, can be combined with the official demo (http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.html) Look:
// Defines the root id variable

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 by the initialization tree. You can also choose not to write or define a static json file. You can also choose not to write anything. It is automatically generated based on the second url, depends on the specific needs
Loader: new Tree. TreeLoader ({dataUrl: 'calendardetail. do? Method = getDayDetailJSON & parentId = '+ rootId }),
EnableDD: true,
ContainerScroll: true
});

// Set the root node
Var root = new Tree. AsyncTreeNode ({
Text: 'yui-ext ',
Draggable: false,
Id: rootId
});
Tree. setRootNode (root );

// Dynamically spell the request server path based on the current node id
// Each time a node is generated, it points to an event reference and will create loader. dataUrl (the specific event mechanism needs to be further studied)
// Note that the call function is beforeload.
Tree. on ('beforeload', function (node ){
Tree. loader. dataUrl = 'calendardetail. do? Method = getDayDetailJSON & parentId = '+ node. id;
});


// The usage of a custom json is demonstrated here (description is the key of the custom json)
// And how to define the style (node. ui. textNode. style. title) of a node)
// For details, refer to the ui class.
Tree. on ('beforeexpand', function (node ){
Node. ui. textNode. style. title = 'red ';
Alert (node. attributes. description );
});

// Render the tree
Tree. render ();

// False for not recursive (the default), false to disable animation
Root. expand ();
}
};
}();

At the same time, analyze a json file:

The Code is as follows:

[{"Text": "Clothes ",
"Id": "5", // note: this is the id of the node. It is used for connection, which is different from the official json.
"Leaf": true,
"Cls": "file ",
"Description": "Here is the clothes class"}] // you only need to customize it.
The following code snippet is provided to generate json in java:
......
// List the category set for the input 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 a node with the id as parentId exists.
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
......