Introduction to tree usage in EasyUI_jquery

I am really too busy. I should have a lot of things to write, but I don’t have much free time. Every time I think about writing, I forget something. It’s the last day of October, and I have to finish writing this article even though I’m busy, otherwise I’ll have another blank month.

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 what is expected. I have been confused for a few days. After expanding, 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 loaded again. It was loaded repeatedly, resulting in repeated display of data, and no method was provided to clear child nodes. After trying various ways to solve this problem, we can only load the values ​​of child nodes in another form. Save each node value and determine whether it already exists. If it exists, load it without loading.

Two methods are shown in examples:

Copy code The code is as follows:

var treeTitle = 'Select List';
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) {
//--------The first method: asynchronously load child node values-------------
// $('#basetree' ).tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString());

//-- ----------Second method: The Ajax method returns the Json value of the child node, and uses the append method to load the child node
$.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('prompt', 'query statement error', 'error');
if(nodeExp== false)
{
$("#basetree").children().remove();
}
},
onLoadSuccess:function(success)
{
var child=$("#basetree").children().length;
noinf ;
if(child==0&&noinf>1)
{
$.messager.alert('hint' , 'Data does not exist', '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;
}
//Expand all
function collapseAll() {
$("#radCollapse").attr("checked", "checked");
var node = $('#basetree').tree('getSelected');
if (node) {
$('#basetree').tree('collapseAll', node.target);
} else {
$('#basetree').tree('collapseAll');
}
}
//Collapse all
function expandAll() {
var node = $('#basetree').tree('getSelected');
if (node) {
$('#basetree').tree('expandAll', node.target);
} else {
$('#basetree').tree('expandAll');
}
}
//Add child node
function append(datas,cnode) {
var node = cnode;
$('#basetree').tree('append', {
parent: node.target,
data: datas
});
nodekeep =" ," node.id;
}
//Reload
function reload() {
var node = $('#basetree').tree('getSelected');
if (node) {
$('#basetree').tree('reload', node.target);
} else {
$('#basetree').tree('reload');
}
}
//Delete child node
function remove() {
var node = $('#basetree').tree('getSelected');
$( '#basetree').tree('remove',node.target);
}

Page getTreeNode.ashx returns tree node JSON format data:

Copy code 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 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扩展一下，添加一个清除子节点的方法，这样应该实现起来会更容易方便。

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

　　同时也感谢各位抽出宝贵的时间阅读文章，让我们共同进步，共同分享交流，在节省他人的时间就是提高自己~~~

作者：ZHF