この記事が記録しているのは、メンバーを率いて小さなモジュール関数を開発する際、ポップアップウィンドウを使ってツリー状のカスケードユニット選択を読み込む必要があり、最終的には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 の最初の紹介
jQuery EasyUI チュートリアル- パネル
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
