Study Day 5--About TreePanel(Part 1)
Effect demonstration: /yuicn/demos/order_tree.asp
The tree component is a new component that is 0.40. Although YUI already comes with TREE VIEW components, JACK still decided to redevelop it. The specific reason is /yuicn/?id=20070245 (translated article) or /blog/2006/12/29/preview-drag-and-drop-enhancements-and-the-new-treepanel/ (original text)
1. Load a synchronous tree:
Copy the codeThe code is as follows:
var TreeTest = function(){
var Tree = ;// Shortcut
return {
init : function(){
var tree = new (’tree_div’, {// Need a tree_div holder
animate:true, //Is it animated?
loader: new ({dataUrl:’get_nodes.asp’}), //Call a JSON
enableDD:false,// Whether drag and drop support
containerScroll: true
});
// Set the root node
var root = new ({
text: ’Frank’s work’, //root node text
draggable:false, //Is the root node drag-and-dropable?
id:’source’
});
(root);
// Rendering tree
(false,false);
// false for not recursive (the default), false to disable animation
(false,false);
}
};
}();
(, TreeTest, true);
Calling this get_nodes.asp file through XHR, assuming that the server returns such a JSON (introduction to JSON:/):
[{
"text":"","id":"\/","leaf":true,"cls":"file"
} ,{
"text":"","id":"\/","leaf":true,"cls":"file"
} ,{
"text":"","id":"\/","leaf":true,"cls":"file"
} ,{
"text":"build","id":"\/build","cls":"folder"
} ,{
"text":"source","id":"\/source","cls":"folder"
} ,{
"text":"","id":"\/","leaf":true,"cls":"file"
} ,{
"text":"","id":"\/","leaf":true,"cls":"file"
} ]
The output of JSON on Server side (ASP JScript)
Copy the codeThe code is as follows:
var goods = new dbOpen();
="select * from goodsbigclass";
with(goods){
GetRS(1);
var str="";
str+="[";
do{
str+=’{"text":"’+rs("BigClassName")+’","id":"\/","leaf":true,"cls":"file","href":"?b_id=’+rs("BigClassID")+’"},’;
();
}while(!);
str+="]";
(str);
Close();
}
goods= null;
explain:
"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 is 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 attributes to JSON as the attributes of nodes, 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 . FAQ.4 will continue to explain this issue.
FQA FAQ:
Does XML data exchange support?
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 expand the child node with a click instead of double click, is it OK?
A: Yes, see:
(’click’, function(node){
if(!()){
();
}
});
3. Several situations of event handling:
A: a. When adding a node, add events to it.
(’append’, function(tree, node){
if( == ’foo’){
// Here you add your events (such as click) and (addListener())
}
});b. Click event for a certain node
(’click’, function(node){
if( == ’foo’){
// do something
}
});c. Events for a certain area (collection)
// fires any time the selection in the tree changes
().on(’selectionchange’, function(sm, node){
if(node && == ’foo’){
// do something
}
});
4. How to get custom fields in JSON (or parameters)
A: The JSON object has been passed to TreeNode by the construction function construction and appears as a , so the attribute can be obtained by calling it. For details, see: /forum/?t=2253
(’click’, function(node){
if(!()){
();
}
});