浅析jQueryEasyUI中的tree使用指南

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

　　两种方法见实例：

var treeTitle = '选择列表';
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) {
//------------第一种方法：异步加载子节点值-------------
// $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString());
//------------第二种方法：Ajax方法返回子节点Json值，使用append方法加载子节点 
 $.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('提示', '查询语句出错', 'error');
 if(nodeExp==false)
 {
 $("#basetree").children().remove();
 }
 },
 onLoadSuccess:function(success)
 {
 var child=$("#basetree").children().length;
 noinf++;
 if(child==0&&noinf>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格式数据：

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

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

更多浅析jQuery EasyUI中的tree使用指南相关文章请关注PHP中文网！

相关文章：

easyui datagrid分页 4、easyUI-七种布局（layout）

初识通用数据库操作类前端easyui-datagrid，form（php），easyuidatagrid

jQuery EasyUI 教程-Panel（面板）