ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery 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 != '') { 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; } //全部展开 function collapseAll() { $("#radCollapse").attr("checked", "checked"); var node = $('#basetree').tree('getSelected'); if (node) { $('#basetree').tree('collapseAll', node.target); } else { $('#basetree').tree('collapseAll'); } } //全部收缩 function expandAll() { var node = $('#basetree').tree('getSelected'); if (node) { $('#basetree').tree('expandAll', node.target); } else { $('#basetree').tree('expandAll'); } } //增加子节点 function append(datas,cnode) { var node = cnode; $('#basetree').tree('append', { parent: node.target, data: datas }); nodekeep+=","+node.id; } //重新加载 function reload() { var node = $('#basetree').tree('getSelected'); if (node) { $('#basetree').tree('reload', node.target); } else { $('#basetree').tree('reload'); } } //删除子节点 function remove() { var node = $('#basetree').tree('getSelected'); $('#basetree').tree('remove',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; } } }
キー コードはすでに上にあり、現時点ではこれがそれを解決する唯一の方法です。時間があれば、そうであれば、ツリーを拡張して子ノードをクリアするメソッドを追加すると、実装がより簡単で便利になります。
jQuery EasyUI のツリー使用ガイドに関するその他の記事については、PHP 中国語 Web サイトに注目してください。
関連記事:
easyui datagrid ページング 4、easyUI-7 レイアウト (レイアウト)
一般的なデータベース操作フロントエンドの easyui-datagrid、フォーム (php)、easyuidatagrid の最初の紹介