Tree usage in EasyUI _ jquery

It may end in October, but it will end at the end of the year. Looking at the article I wrote last time, I haven't written it for two months. It's really too busy. I should have a lot to write, but I have no spare time, every time I think about writing, I forget something. The last day of June October, I have to finish this article while I am busy. Otherwise, I will have another blank month.

This is before leading members to develop a small module function, you need to use the pop-up window to load the tree cascading unit selection, and finally decided to use jQuery + EasyUI plug-in for development. However, we encountered a lot of trouble when using the tree plug-in EasyUI. To provide the display speed of the pop-up tree, the number node value is asynchronously loaded. First, the root node is loaded, and then the child node is loaded Based on the clicked node.

The results are often different from the expected ones. After expansion, the child nodes are dynamically loaded, but the data filled in before cannot be cleared after contraction. During the second expansion, the child node is repeatedly loaded, causing repeated data display. The method of clearing the child node is not provided. I tried every means to solve this problem. I had to load the value of the subnode in another way. I saved the value of each node and determined whether it existed. if it existed, I would not load it.

For two methods, see the example:

The Code is as follows:

Var treeTitle = 'select list ';
Var treeUrl = '../DataAshx/getTreeNode. ashx? Pid =-1 ';
Var nodeExp = false;
Var nodekeep = "";
Var rows;
Var noinf = 0;
$ (Function (){
$ ('# Treewindow'). window ({
Title: treeTitle,
Width: 400,
Height: 400,
Modal: true,
Shadow: false,
Closed: true,
Resizable: false,
Maximizable: false,
Minimizable: false,
Collapsible: false
});
});
Function treeWindowOpen (name, rowIndx ){
$ ('# Treewindow'). window ('open ');
Nodekeep = "";
NodeExp = false;
Rows = rowIndx. toString ();
$ ('# Basetree'). tree ({
Checkbox: true,
Animate: true,
Url: treeUrl + "& coln =" + escape (name. toString ()),
CascadeCheck: true,
OnlyLeafCheck: false,
OnBeforeExpand: function (node, param ){
// ------------ Method 1: asynchronously load the subnode value -------------
// $ ('# Basetree'). tree ('options'). url = "../DataAshx/getTreeNode. ashx? Pid = "+ node. id +" & coln = "+ escape (name. toString ());

// ------------ Method 2: Ajax method returns the Json value of the subnode and append method is used to load the subnode.
$. Ajax ({
Type: "POST ",
Url: "../DataAshx/getTreeNode. ashx? Pid = "+ node. id + "& coln =" + escape (name. toString () + "& casn =" + escape (node. attributes. cas. toString ()),
Cache: false,
Async: false,
DataType: "json ",
Success: function (data ){
If (nodekeep. indexOf (node. id) =-1)
{
Append (data, node );
NodeExp = true;
}
}
});
$ ("# RadCollapse"). removeAttr ("checked ");
},
OnLoadError: function (Error)
{
$. Messager. alert ('hprompt ', 'query statement error', 'error ');
If (nodeExp = false)
{
$ ("# Basetree"). children (). remove ();
}
},
OnLoadSuccess: function (success)
{
Var child = $ ("# basetree"). children (). length;
Noinf ++;
If (child = 0 & noinf> 1)
{
$. Messager. alert ('hprompt ', 'Data does not exist', 'info ');
}
}
});

}
Function treeWindowClose (){
$ ('# Treewindow'). window ('close ');
Nodekeep = "";
Nodekeep = false;
}
Function treeWindowSubmit (){
Var nodes = $ ('# basetree'). tree ('getchecked ');
Var info = '';
If (nodes. length> 0 ){
For (var I = 0; I <nodes. length; I ++ ){
If (info! = '') {Info + = ',';}
Info + = nodes [I]. text;
}
// Alert (JSON. stringify (nodes ));
}
Else {
Var node = $ ('# basetree'). tree ('getselected ');
If (node! = Null ){
Info = node. text;
}
}
$ ("#" + Rows). val (info );
$ ('# Treewindow'). window ('close ');
Nodekeep = "";
NodeExp = false;
}
// Expand all
Function collapseAll (){
$ ("# RadCollapse"). attr ("checked", "checked ");
Var node = $ ('# basetree'). tree ('getselected ');
If (node ){
$ ('# Basetree'). tree ('collapseall', node.tar get );
} Else {
$ ('# Basetree'). tree ('collapseall ');
}
}
// Shrink all
Function expandAll (){
Var node = $ ('# basetree'). tree ('getselected ');
If (node ){
$ ('# Basetree'). tree ('pandall', node.tar get );
} Else {
$ ('# Basetree'). tree ('pandall ');
}
}
// Add a subnode
Function append (datas, cnode ){
Var node = cnode;
$ ('# Basetree'). tree ('append ',{
Parent: node.tar get,
Data: datas
});
Nodekeep + = "," + node. id;
}
// Reload
Function reload (){
Var node = $ ('# basetree'). tree ('getselected ');
If (node ){
$ ('# Basetree'). tree ('reload', node.tar get );
} Else {
$ ('# Basetree'). tree ('reload ');
}
}
// Delete a subnode
Function remove (){
Var node = $ ('# basetree'). tree ('getselected ');
('Your basetree'apps.tree('remove', node.tar get );
}

The page getTreeNode. ashx returns the JSON format data of the Tree node:

The Code is as follows:

<% @ WebHandler Language = "C #" Class = "getTreeNode" %>
Using System;
Using System. Collections;
Using System. Data;
Using System. Linq;
Using System. Web;
Using System. Web. Services;
Using System. Web. Services. Protocols;
Using System. Xml. Linq;
Using System. Collections. Generic;
Public class getTreeNode: IHttpHandler, System. Web. SessionState. IRequiresSessionState
{
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
DataTable dt = (DataTable) context. Session ["viewmaintain"];
String parentId = string. Empty;
String resultStr = string. Empty;
String attributes = string. Empty;
String colName = string. Empty;
String SQL = string. Empty;
String Casname = string. Empty;
Bool colt = false;
String icon = "icon-profile ";
If (! String. IsNullOrEmpty (context. Request. QueryString ["pid"])
{
ParentId = context. Request. QueryString ["pid"]. ToString ();
}
If ((! String. IsNullOrEmpty (context. Request. QueryString ["coln"]) & (string. IsNullOrEmpty (context. Request. QueryString ["casn"])
{
ColName = HttpUtility. UrlDecode (context. Request. QueryString ["coln"]. ToString ());
If (dt! = Null)
{
Bool pt = true;
While (pt)
{
For (int I = 0; I <dt. Rows. Count; I ++)
{
Casname = dt. Rows [I] ["view_colname"]. ToString ();
If (dt. Rows [I] ["view_colname"]. ToString () = colName)
{
If (dt. Rows [I] ["view_cas"]. ToString ()! = Null & dt. Rows [I] ["view_cas"]. ToString ()! = "")
{
ColName = dt. Rows [I] ["view_cas"]. ToString ();
}
Else
{
Colt = true;
SQL = dt. Rows [I] ["view_ SQL"]. ToString ();
Pt = false;
}
Break;
}
}
}
}
}
If ((! String. IsNullOrEmpty (context. Request. QueryString ["casn"]) & (! String. IsNullOrEmpty (context. Request. QueryString ["coln"])
{
String casnName = HttpUtility. UrlDecode (context. Request. QueryString ["casn"]. ToString ());
ColName = HttpUtility. UrlDecode (context. Request. QueryString ["coln"]. ToString ());
If (dt! = Null)
{
For (int I = 0; I <dt. Rows. Count; I ++)
{
Casname = dt. Rows [I] ["view_colname"]. ToString ();
If (dt. Rows [I] ["view_cas"]. ToString () = casnName & casnName! = ColName)
{
Colt = true;
SQL = dt. Rows [I] ["view_ SQL"]. ToString ();
Break;
}
}
}
}
Try
{
If (parentId! = "" & Colt = true)
{
// The code for getting the data list is omitted here
List Ltree = DAL_TreeInfo.GetItemValue (parentId, SQL );
ResultStr = "";
ResultStr + = "[";
If (ltree. Count> 0)
{
Foreach (TreeInfo item in ltree)
{
Attributes = "";
Attributes + = "{\" cas \ ": \" "+ Casname;
Attributes + = "\", \ "val \": \ "" + item. _ text + "\"}";
ResultStr + = "{";
ResultStr + = string. format ("\" id \ ": \" {0} \ ", \" text \ ": \" {1} \ ", \" iconCls \": \ "{2} \", \ "attributes \": {3}, \ "state \": \ "closed \" ", item. _ id, item. _ text, icon, attributes );
ResultStr + = "},";
}
ResultStr = resultStr. Substring (0, resultStr. Length-1 );
}
ResultStr + = "]";
}
Else
{
ResultStr = "[]";
}
}
Catch (Exception ex)
{
ResultStr = "error ";
}
Context. Response. Write (resultStr );
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}

The key code is already on the top. Currently, this method can only be used to solve the problem. If you have time, you can extend the tree and add a method to clear subnodes, this should be easier to implement.

The younger brother is ugly here. I don't know if you have encountered similar problems or have any other better solutions.

At the same time, I would like to thank you for taking the time to read the article, so that we can make common progress and share and communicate with each other. saving others time is to improve ourselves ~~~

Author: ZHF