EasyUI中的tree用法介绍

这是之前带领成员开发一个小模块功能的时候，需要用到弹出窗口加载树状级联单位选择，最后决定用采用jQuery+EasyUI插件进行开发。但是在使用EasyUI中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 != &#39;&#39;) { info += &#39;,&#39;; } 
info += nodes[i].text; 
} 
//alert(JSON.stringify(nodes)); 
} 
else { 
var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;); 
if (node != null) { 
info = node.text; 
} 
} 
$("#"+rows).val(info); 
$(&#39;#treewindow&#39;).window(&#39;close&#39;); 
nodekeep=""; 
nodeExp=false; 
} 
//全部展开 
function collapseAll() { 
$("#radCollapse").attr("checked", "checked"); 
var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;); 
if (node) { 
$(&#39;#basetree&#39;).tree(&#39;collapseAll&#39;, node.target); 
} else { 
$(&#39;#basetree&#39;).tree(&#39;collapseAll&#39;); 
} 
} 
//全部收缩 
function expandAll() { 
var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;); 
if (node) { 
$(&#39;#basetree&#39;).tree(&#39;expandAll&#39;, node.target); 
} else { 
$(&#39;#basetree&#39;).tree(&#39;expandAll&#39;); 
} 
} 
//增加子节点 
function append(datas,cnode) { 
var node = cnode; 
$(&#39;#basetree&#39;).tree(&#39;append&#39;, { 
parent: node.target, 
data: datas 
}); 
nodekeep+=","+node.id; 
} 
//重新加载 
function reload() { 
var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;); 
if (node) { 
$(&#39;#basetree&#39;).tree(&#39;reload&#39;, node.target); 
} else { 
$(&#39;#basetree&#39;).tree(&#39;reload&#39;); 
} 
} 
//删除子节点 
function remove() { 
var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;); 
$(&#39;#basetree&#39;).tree(&#39;remove&#39;,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扩展一下，添加一个清除子节点的方法，这样应该实现起来会更容易方便。

Atas ialah kandungan terperinci EasyUI中的tree用法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!