EasyUI でのツリーの使用法の概要

これは、以前メンバーを指導して小さなモジュール関数を開発したとき、ツリー状のカスケードユニット選択をロードするためにポップアップウィンドウを使用する必要があり、最終的に開発に jQuery+EasyUI プラグインを使用することにしました。ただし、EasyUI でツリー プラグインを使用するときに多くの問題に遭遇しました。ポップアップ ツリーの表示速度を向上させるために、ノード値の非同期ロードを使用します。まずルート ノードがロードされ、次にクリックされたノードに応じて子ノードがロードされます。

結果が予想と異なることがよくあり、拡張後は子ノードが動的に読み込まれますが、縮小後に再度拡張すると、以前に入力されたデータが消去されません。 、子ノードが再度ロードされると、データが繰り返し表示されますが、子ノードをクリアする方法はありません。この問題を解決するためにさまざまな方法を試した後、各ノードの値を別の形式で保存し、存在する場合はロードせずにロードするしかありません。

2 つのメソッドの例を参照してください:

コードは次のとおりです:

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

キー コードは次のとおりです:すでに上にあり、これが私がそれを解決する唯一の方法だと思います。時間があれば、ツリーを展開して子ノードをクリアするメソッドを追加すると、実装がより簡単で便利になります。

以上がEasyUI でのツリーの使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。