EasyUI_jquery でのツリーの使用法の概要-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 17:59:47

オリジナル

1087 人が閲覧しました

本当は忙しすぎて、書くべきことがたくさんあるはずなのに、書くことを考えるたびに何かを忘れてしまいます。 10月も最終日、忙しいけどこの記事を書き終えないとまた空白の月ができてしまいます。

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

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

例では 2 つのメソッドが示されています。

コードをコピーコードは次のとおりです。

 
vartreeTitle = 'リストの選択'; 
vartreeUrl = '../DataAshx/getTreeNode.ashx?pid=-1'; 
var nodeExp=false; ""; 
var rows; 
var noinf=0; 
$('#treewindow').window({ 
title:treeTitle, 
幅: 400、
高さ: 400、
モーダル: true、
シャドウ: false、
閉じた: true、
サイズ変更可能: false、
最大化可能: false、
最小化可能: false, 
折りたたみ可能: false 
}); 
function TreeWindowOpen(name,rowIndx) { 
$('#treewindow').window('open'); 
nodekeep=""; 
nodeExp=false; 
$('#basetree').tree({ 
チェックボックス: 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()); 

//-- ----- -----2 番目のメソッド: Ajax メソッドは子ノードの Json 値を返し、append メソッドを使用して子ノードをロードします 
$.ajax({ 
type: "POST", 
 URL : "../DataAshx/getTreeNode.ashx?pid="node.id "&coln="escape(name.toString()) "&casn="escape(node.attributes.cas.toString()), 
キャッシュ : false、
async: false、
dataType: "json"、
成功: function(data) { 
if(nodekeep.indexOf(node.id)==-1) 
 { 
append(データ, ノード); 
} 
} 
}); ; 
}, 
onLoadError:function(Error) 
{ 
$.messager.alert('prompt', 'クエリステートメントエラー', 'error'); = false) 
{ 
$("#basetree").children().remove(); 
} 
}, 
onLoadSuccess:function(success) 
{ 
 var child=$("#basetree").children().length; 
noinf ; 
if(child==0&&noinf>1) 
{ 
$.messager.alert('hint) ' , 'データが存在しません', '情報'); 
} 
} 
}); 

} 
関数treeWindowClose() { 
$('#ツリーウィンドウ' ).window('close'); 
nodekeep=""; 
nodekeep=false; 
関数 TreeWindowSubmit() { 
var ノード = $('#basetree' ).tree('getChecked'); 
var info = ''; 
if (nodes.length > 0) { 
for (var i = 0; i if (info != '') { info = ',' } 
info = nodes[i].text 
} 
//alert(JSON.stringify(nodes); ; 
} 
else { 
var ノード = $('#basetree').tree('getSelected'); 
if (ノード != null) { 
情報 = ノード.text; 
} 
} 
$("#" rows).val(info); 
$('#treewindow').window('close'); ""; 
nodeExp=false; 
} 
//すべて展開
関数 CollapseAll() { 
$("#radCollapse").attr("checked", "checked") ; 
 var ノード = $('#basetree').tree('getSelected'); 
if (ノード) { 
$('#basetree').tree('collapseAll', node.target ); 
} else { 
$('#basetree').tree('collapseAll'); 
} 
} 
//すべてを折りたたむ
関数 ExpandAll() { 
var node = $('#basetree').tree('getSelected'); 
if (node) { 
$('#basetree').tree('expandAll', node.target); 
} else { 
$('#basetree').tree('expandAll'); 
} 
} 
//子ノードを追加
関数 append(datas,cnode) { 
 var node = cnode; 
$('#basetree').tree('append', { 
親: ノード.ターゲット, 
データ: データ 
}); >nodekeep = $('#basetree').tree('getSelected'); 🎜>if (ノード) { 
$('#basetree').tree('reload', node.target); 
} else { 
$('#basetree').tree('reload '); 
} 
} 
//子ノードを削除
function delete() { 
var node = $('#basetree').tree('getSelected'); >$( '#basetree').tree('remove',node.target); 
} 


ページ getTreeNode.ashx はツリー ノードの JSON 形式データを返します: 




コードをコピーします


 コードは次のとおりです:
 
<%@ WebHandler Language="C#" Class="getTreeNode" %> 
システムを使用しています。 
System.Collections を使用します。 
System.Data を使用します。 
System.Linq を使用; 
System.Web を使用; 
System.Web.Services を使用します。 
System.Web.Services.Protocols を使用します。 
System.Xml.Linq を使用; 
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"]; 
文字列親Id = string.Empty; 
文字列結果Str = string.Empty; 
文字列属性 = string.Empty; 
文字列colName = string.Empty; 
文字列 sql = 文字列.Empty; 
文字列 Casname = string.Empty; 
ブールコルト = false; 
文字列アイコン = "アイコンプロファイル"; 
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; 
} 
休憩; 
} 
} 
} 
} 
} 
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 { 
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(); 
休憩; 
} 
} 
} 
} 
try 
{ 
if (parentId != "" && Colt == true) 
{ 
//こちら
List は省略します。 ltree = DAL_TreeInfo.GetItemValue(parentId, sql); 
resultStr = ""; 
resultStr = "["; 
if (ltree.Count > 0) 
{ 
foreach (ltree 内の TreeInfo 項目) 
{ 
attributes = ""; 
attributes = "{"cas":"" Casname; 
attributes = "","val":"" item._text ""}"; 
resultStr = "{"; 
resultStr = string.Format(""id": "{0}", "text": "{1}", "iconCls": "{2}", "attributes": {3}, "state ": "クローズ""、item._id、item._text、アイコン、属性); 
resultStr = "},"; 
} 
resultStr = resultStr.Substring(0, resultStr.Length - 1); 
} 
resultStr = "]"; 
} 
else 
{ 
resultStr = "[]"; 
} 
} 
catch (例外例) 
{ 
resultStr = "出错"; 
} 
context.Response.Write(resultStr); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 


关键性の代码都已经在上面了，目前也就想只能到この种法来解决了，有期限的话可以给木

 小弟在此献丑了、不知道各位专家、同仁有遇看做同様的問題、或者其他有

 同時に、各位の宝物を抽出する時間的な文章も感じています、私たちは共同で、共同共有の交流、艮省の人の時間は自己を高めることです~~~ 

作者：ZHF 