浅析jQuery EasyUI中的tree使用指南

　　本文记录的是带领成员开发一个小模块功能的时候，需要用到弹出窗口加载树状级联单位选择，最后决定用采用jQuery+EasyUI插件进行开发。但是在使用EasyUI中tree的插件时，碰到了不少麻烦。为了提供弹出树的显示速度，就采用异步加载数节点值，首先先加载根节点，然后根据点击的节点展开加载子节点。

　　往往结果和预期的都不一样，困惑了几天，展开后子节点是动态加载了，但是收缩后无法清空之前填充的数据；第二次在展开时，子节点又被重复加载了一遍，造成了数据重复显示，并没有提供清除子节点的方法。想尽了各种办法来解决这个问题，只能换另一种形式加载子节点的值了，把每一个节点值保存起来，判断是否已经存在，存在就不在去加载。

　　两种方法见实例：

代码如下:

1) { $.messager.alert('提示','数据不存在','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; } //全部展开 function collapseAll() { $("#radCollapse").attr("checked","checked"); var node = $('#basetree').tree('getSelected'); if (node) { $('#basetree').tree('collapseAll',node.target); } else { $('#basetree').tree('collapseAll'); } } //全部收缩 function expandAll() { var node = $('#basetree').tree('getSelected'); if (node) { $('#basetree').tree('expandAll',node.target); } else { $('#basetree').tree('expandAll'); } } //增加子节点 function append(datas,cnode) { var node = cnode; $('#basetree').tree('append',{ parent: node.target, data: datas }); nodekeep+=","+node.id; } //重新加载 function reload() { var node = $('#basetree').tree('getSelected'); if (node) { $('#basetree').tree('reload',node.target); } else { $('#basetree').tree('reload'); } } //删除子节点 function remove() { var node = $('#basetree').tree('getSelected'); $('#basetree').tree('remove',node.target); }

　　页面getTreeNode.ashx返回树节点JSON格式数据：

代码如下:

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) { //此处省略得到数据列表的代码 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 = "出错"; } context.Response.Write(resultStr); } public bool IsReusable { get { return false; } } }

　　关键性的代码都已经在上面了，目前也就只能想到这种办法来解决了，有时间的话可以给tree扩展一下，添加一个清除子节点的方法，这样应该实现起来会更容易方便。

　　小弟在此献丑了，不知道各位专家、同仁有没有遇到类似的问题，或者有其它更好的解决办法，欢迎在这交流。