The sixth day of learning YUI.Ext--About tree TreePanel (Part 1)_YUI.Ext related

The fifth day of learning YUI.Ext - About the tree TreePanel (Part 1)
Effect demonstration: http://www.ajaxjs.com/yuicn/demos/order_tree.asp
The tree component is new in YUI.Ext 0.40 added components. Although YUI already comes with TREE VIEW components, JACK decided to re-develop it. The specific reasons are at http://www.ajaxjs.com/yuicn/article.asp?id=20070245 (translated article) or http://www.jackslocum.com/blog/2006/12/29/preview-drag-and -drop-enhancements-and-the-new-treepanel/ (Original text)
1. Load a synchronized Tree:

Copy code The code is as follows:

var TreeTest = function(){
var Tree = YAHOO.ext.tree;// shortcut
return {
init: function() {
var tree = new Tree.TreePanel('tree_div', {//Need a tree_div holder
animate:true, //whether to animate
loader: new Tree.TreeLoader({dataUrl:'get_nodes .asp'}), //Call a JSON
enableDD:false,//Whether drag and drop is supported
containerScroll: true
});
//Set the root node
var root = new Tree.AsyncTreeNode({
text: 'Frank's work', //Root node text
draggable:false, //Whether the root node can be dragged and dropped
id:'source'
}) ;
tree.setRootNode(root);
// Rendering tree
tree.render(false,false);
// false for not recursive (the default), false to disable animation
root.expand(false,false);
}
};
}();
YAHOO.ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

Call this get_nodes.asp file through XHR, assuming that the server returns such a JSON (introduction to JSON: http://www.json.org/json-zh.html):
[{
"text":"yui-ext.js","id":"/yui-ext.js","leaf":true,"cls":"file"
} ,{
"text ":"yui-ext-1118.php","id":"/yui-ext-1118.php","leaf":true,"cls":"file"
} ,{
" text":"yui-ext-1228.php","id":"/yui-ext-1228.php","leaf":true,"cls":"file"
} ,{
"text":"build","id":"/build","cls":"folder"
} ,{
"text":"source","id":"/source", "cls":"folder"
} ,{
"text":"yui-ext-1123.php","id":"/yui-ext-1123.php","leaf":true ,"cls":"file"
} ,{
"text":"yui-ext-1203.php","id":"/yui-ext-1203.php","leaf": true,"cls":"file"
} ]
Server-side JSON output (ASP JScript)

Copy code The code is as follows:

var goods = new dbOpen();
goods.GetSQL ="select * from goodsbigclass";
with(goods){
GetRS(1);
var str="";
str ="[";
do{
str ='{"text":"' rs("BigClassName") '", "id":"/yui-ext.js","leaf":true,"cls":"file","href":"?b_id=' rs("BigClassID") '"},';
                                                                                                                                     🎜>goods= null;


Explanation:
"text"-->Displayed text
"id"-->id value
"leaf"-->Boolean value, if "leaf" is true , it cannot contain child nodes Children nodes
"cls"-->The selected style, usually the icon selected here
"href"-->the specified url, and there is also a "hrefTarget" attribute
In addition, in addition to the above attributes, you can also add any attribute to JSON as an attribute of the node. See Jack's original words:
The href attribute is called "href", there's also an "hrefTarget" attribute. For capturing node clicks, you can listen on individual nodes or you can listen for "click" on the tree which will pass you the node that was clicked. FYI, you can put any attributes you want in the json config for the node and it will be available as node.attributes. FAQ.4 will continue to explain this issue.
FQA FAQ:
1.Does Tree support XML data exchange?
A: Not supported yet. According to FOURM, support will be provided in the future. See:
can I use xml instead of json for sending nodes hirerachy?
Correct me if I'm wrong but I think the answer is no here. But that doesn't mean it won't be supported later on.
2. I want to use single click instead of double click to expand child nodes. May I?
A: Yes, see:
tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});
3. Several situations of event processing:
A: a. When adding a node, add an event to it
tree.on('append', function( tree, node){
if(node.id == 'foo'){
// Add your event (such as click) listener (addListener()) here
}
} );b. Click event for a node
tree.on('click', function(node){
if(node.id == 'foo'){
// do something
}
});c. Events targeting a certain area (collection)
// fires any time the selection in the tree changes
tree.getSelectionModel().on('selectionchange', function(sm, node){
if(node ​​&& node.id == 'foo'){
// do something
}
});
4. How to get JSON Custom fields (or parameters)
A: The JSON object has been passed to TreeNode by the construction function construction and appears as node.attributes, so it can be obtained by calling the attribute node.attributes. For details, see: http://www.yui-ext.com/forum/viewtopic.php?t=2253
tree.on('click', function(node){
if(!node.isLeaf( )){
node.toggle();
}
});