Introduction of tree usage in Easyui _jquery

Really is too busy, there should be a lot of things to write, but there is no idle time, every time I think of writing, to some things to forget. The last day of October, in the busy also have to write this article, otherwise it will be more than a blank month.

This is before leading members to develop a small module function, need to use the pop-up window to load the tree-like Cascade unit selection, and finally decided to use Jquery+easyui plug-ins for development. But in the use of Easyui in the tree plug-in, encountered a lot of trouble. In order to provide the display speed of the pop-up tree, the asynchronous load node value is used, first the root node is loaded, and then the child node is expanded according to the clicked node.

Often the results are not the same as expected, puzzled for a few days, after the expansion of the child node is dynamically loaded, but the contraction can not empty before the fill of data; the second time in the expansion, the child node was repeatedly loaded again, resulting in repeated data display, and did not provide a way to clear the child nodes. Try to solve this problem in a variety of ways, only another form to load the value of the child node, the value of each node to save, to determine whether there is already exist, not to load.

See examples of two methods:

Copy Code code 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) {
------------the first method: to load child node values asynchronously-------------
$ (' #basetree '). Tree (' Options '). url = ". /dataashx/gettreenode.ashx?pid= "+ node.id+" &coln= "+escape (name.tostring ());

------------the second method: The Ajax method returns the child node JSON value and uses the Append method to load the child nodes
$.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 (' hint ', ' 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 (' Hint ', ' data not present ', ' 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.target);
} else {
$ (' #basetree '). Tree (' CollapseAll ');
}
}
Shrink All
function ExpandAll () {
var node = $ (' #basetree '). Tree (' getselected ');
if (node) {
$ (' #basetree '). Tree (' ExpandAll ', node.target);
} else {
$ (' #basetree '). Tree (' ExpandAll ');
}
}
Increase child nodes
function Append (datas,cnode) {
var node = Cnode;
$ (' #basetree '). Tree (' append ', {
Parent:node.target,
Data:datas
});
nodekeep+= "," +node.id;
}
Reload
function Reload () {
var node = $ (' #basetree '). Tree (' getselected ');
if (node) {
$ (' #basetree '). Tree (' Reload ', node.target);
} else {
$ (' #basetree '). Tree (' reload ');
}
}
Delete child nodes
function Remove () {
var node = $ (' #basetree '). Tree (' getselected ');
$ (' #basetree '). Tree (' Remove ', node.target);
}

Page Gettreenode.ashx returns the tree node JSON format data:

Copy Code code 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 to get a list of data is omitted here
list<treeinfo> 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, now can only think of this approach to solve, if you have time to expand the tree, add a way to clear the child nodes, which should be implemented easier.

Younger brother in this shortcoming, do not know whether the experts, colleagues have encountered similar problems, or have other better solutions, welcome in this exchange.

At the same time, thank you for your valuable time to read the article, let us make progress together, share the exchange, in saving others time is to improve their own ~ ~ ~

Author: ZHF