Introduction à l'utilisation des arbres dans EasyUI

C'est à ce moment-là que j'ai amené les membres à développer une petite fonction de module auparavant, j'avais besoin d'utiliser une fenêtre contextuelle pour charger la sélection d'unités de cascade d'arbres, et j'ai finalement décidé d'utiliser le plug-in jQuery+EasyUI pour développement. Cependant, j'ai rencontré beaucoup de problèmes lors de l'utilisation du plug-in d'arborescence dans EasyUI. Afin d'améliorer la vitesse d'affichage de l'arborescence contextuelle, nous utilisons le chargement asynchrone des valeurs des nœuds. Tout d'abord, le nœud racine est chargé, puis les nœuds enfants sont chargés en fonction du nœud cliqué.

Souvent, les résultats sont différents de ce qui est attendu. J'ai été confus pendant quelques jours. Après l'expansion, les nœuds enfants sont chargés dynamiquement, mais après la réduction, les données précédemment remplies ne peuvent pas être effacées ; lors du deuxième développement, les nœuds enfants ont été chargés à nouveau, ce qui a entraîné un affichage répété des données et aucune méthode n'a été fournie pour effacer les nœuds enfants. Après avoir essayé différentes manières de résoudre ce problème, je ne peux charger la valeur du nœud enfant que sous une autre forme. Enregistrez la valeur de chaque nœud et déterminez si elle existe déjà. Si elle existe, elle ne sera pas chargée.

Voir exemples pour deux méthodes :

Le code est le suivant :

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

La page getTreeNode.ashx renvoie les données au format JSON du nœud d'arbre :

Le code est le suivant :

<%@ 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; 
} 
} 
}

Les codes clés sont déjà ci-dessus. À l'heure actuelle, c'est la seule façon de le résoudre. Si vous avez le temps, vous. peut développer l'arborescence. L'ajout d'une méthode pour effacer les nœuds enfants devrait rendre la mise en œuvre plus facile et plus pratique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!