JQueryMiniUI development tutorial tree control tree: lazy loading tree (5)

Example of lazy loading tree: lazy loading tree creation code & lt; ulid & quot; tree1 & quot; class & quot; mini-tree & quot; url & quot ;.. /data/TreeService. aspx? MethodLoadNodes & quot; style & quot; width: 300px; height: 200px; p

Lazy loading tree

Example: lazy loading tree

Create Code

ShowTreeIcon = "true" textField = "name" idField = "id" onbeforeload = "onBeforeTreeLoad"
>



Data returned by the server

[{
Id: "form ",
Text: "Form ",
......
IsLeaf: false, // whether the leaf node is + and-
Expanded: false // The node is contracting
},
......
]
IsLeft indicates whether the node has a lower-level node. Expanded indicates that the node is in the collapsed State.

Lazy loading event

When you click the "+" icon, the next-level node is automatically loaded, and the current node id is passed to the background. You can also block loading events and add additional attributes:

Function onBeforeTreeLoad (e ){
Var tree = e. sender; // tree control
Var node = e. node; // current node
Var params = e. params; // parameter object

// Custom attributes can be passed
Params. myField = "123"; // Background: Get "myField" from the request object"
}

Server Processing

After the server obtains the "id" attribute through the request, it loads the array of the next-level nodes of the node and returns the result in JSON format.

String id = Request ["id"];
If (String. IsNullOrEmpty (id) id = "-1 ";

// Obtain the next-level node
String SQL = "select * from plus_file where pid = '" + id + "'order by updatedate ";
ArrayList folders = DBUtil. Select (SQL );

// Determine whether a node has a subnode. If yes, isLeaf and expanded are processed.
For (int I = 0, l = folders. Count; I <l; I ++)
{
Hashtable node = (Hashtable) folders [I];
String nodeId = node ["id"]. ToString ();

String sql2 = "select * from plus_file where pid = '" + nodeId + "'order by updatedate ";
ArrayList nodes = DBUtil. Select (sql2 );

If (nodes. Count> 0)
{Www.2cto.com
Node ["isLeaf"] = false;
Node ["expanded"] = false;
}

}

// Return JSON
String json = PluSoft. Utils. JSON. Encode (folders );
Response. Write (json );