Learn the sixth day of Yui.ext-about Tree Treepanel (Part 2 asynchronous Fetch node) _yui. Ext Related

Source: Internet
Author: User
Tags stringbuffer
Here's how to asynchronously pick up all the nodes of a tree, which is very different from the official Sync node, especially on the id attribute of JSON, and here is some of my groping, perhaps not the best solution, to be studied together.
The idea of an asynchronous fetch node is this:
1, first define an initialization node (also can not be defined, see personal needs)
2, Yui-ext according to the node ID request the server, get the child node properties
3. Cycle
Features: Can be in the previous level of the directory, read the node in advance on the server side (the IsLeaf attribute in JSON), although the database will bear some more pressure, but using a count (*) will not cause too much (unless the query condition is unusually complex), you can not read it. That is, set all IsLeaf to False.
Problem:
1, currently can not be reload, that is, each open node read again
2, there are some problems with the style, unable to pass node. Childnodes[i] Sets the child node's style, so it is not possible to change the style of the last-level element (perhaps by changing the style in another way). )
Example:
First give a piece of JS code, you can combine the official demo (http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.html) to see:
A variable that defines the root ID
Copy Code code 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 can not write or define a static JSON file, you can write nothing all depend on the second URL automatically generated, depending on the specific requirements
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 out the path to the requesting server based on the current node ID
Each generation of a node, pointing to a reference to an event, will create a new Loader.dataurl (the mechanism of the specific event needs to be studied again)
Note that the call function is Beforeload
Tree.on (' Beforeload ', function (node) {
TREE.LOADER.DATAURL = ' calendardetail.do?method=getdaydetailjson&parentid= ' +node.id;
});


This shows a custom JSON usage (description for custom JSON key)
And how to define a node's style (Node.ui.textNode.style.title)
You can look at the UI this class
Tree.on (' BeforeExpand ', function (node) {
Node.ui.textNode.style.title = ' red ';
alert (node.attributes.description);
});

Render the Tree
Tree.render ();

False for Don't recursive (the default), False to disable animation
Root.expand ();
}
};
}();

And then parse a JSON:
Copy Code code as follows:

[{"Text": "Clothing Class",
"id": "5",//Note: This is the ID of the node, which is used when connecting, and differs from the official JSON
"Leaf": true,
"CLS": "File",
"description": "Here is the Clothes Class"}]//Custom just need to do this.
Gives a snippet of code logic for Java to generate JSON:
......
List is the collection of category that are asked for by the ID passed in
List list=
FindBy ("ParentID", New Long (Parentid.tostring ()));
StringBuffer jsonstr = new StringBuffer (); Declaring JSON
Jsonstr.append ("[");

for (Costcategory i:list) {
Boolean isleaf = IsLeaf (I.getid ()); IsLeaf () to determine whether there is a node with the ID ParentID, specifically does not give the
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
......

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.