Introduction to tree usage in EasyUI

This is when I led members to develop a small module function before, I needed to use a pop-up window to load the tree-like cascade unit selection, and finally decided to use the jQuery+EasyUI plug-in for development. However, I encountered a lot of trouble when using the tree plug-in in EasyUI. In order to improve the display speed of the pop-up tree, we use asynchronous loading of node values. First, the root node is loaded, and then the child nodes are loaded according to the clicked node.

Often the results are different from expectations. I have been confused for a few days. After expansion, the child nodes are dynamically loaded, but after shrinking, the previously filled data cannot be cleared; when expanding for the second time, the child nodes are dynamically loaded. The node was loaded again, resulting in repeated display of data, and no method was provided to clear the child nodes. After trying various ways to solve this problem, I can only load the value of the child node in another form. Save each node value and determine whether it already exists. If it exists, it will not be loaded.

See examples for two methods:

The code is as follows:

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); 
}

The page getTreeNode.ashx returns tree node JSON format data:

The code is 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) 
{ 
//此处省略得到数据列表的代码 
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; 
} 
} 
}

The key codes are already above. At present, this is the only way to solve it. If you have time, you can expand the tree and add a clearing subroutine. Node method, which should be easier and more convenient to implement.

The above is the detailed content of Introduction to tree usage in EasyUI. For more information, please follow other related articles on the PHP Chinese website!