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擴展一下，添加一個清除子節點的方法，這樣應該實作起來會比較容易方便。

以上是EasyUI中的tree用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！