この記事では、メンバーを率いて小さなモジュール関数を開発する際、ポップアップ ウィンドウを使用してツリー状のカスケード ユニットの選択を読み込む必要があり、最終的に開発に jQuery EasyUI プラグインを使用することにしたことを記録しています。ただし、EasyUI でツリー プラグインを使用するときに多くの問題に遭遇しました。ポップアップ ツリーの表示速度を向上させるために、ノード値の非同期ロードを使用します。まずルート ノードがロードされ、次にクリックされたノードに応じて子ノードがロードされます。
多くの場合、結果が予想と異なることがあります。拡張後、子ノードは動的に読み込まれますが、縮小後に 2 回目の拡張を行うと、以前に入力されたデータが消去されません。 、子ノードが再度ロードされると、データが繰り返し表示されますが、子ノードをクリアする方法はありません。この問題を解決するためにさまざまな方法を試した後、各ノードの値を別の形式で保存し、存在する場合はロードせずにロードするしかありません。
2 つのメソッドの例を参照してください:
vartreeTitle = '选择列表';
vartreeUrl = '../DataAshx/getTreeNode.ashx?pid=-1';
var nodeExp=false;
var nodekeep="";
var 行;
var noinf=0;
$(function() {
$('#treewindow').window({
title: ツリータイトル、
幅: 400、
高さ: 400、
モーダル: true、
シャドウ: false、
クローズ済み: true、
サイズ変更可能: false、
最大化可能: false、
最小化可能: false、
折りたたみ可能: false
});
});
function TreeWindowOpen(name,rowIndx) {
$('#treewindow').window('open');
ノードキープ="";
nodeExp=false;
rows=rowIndx.toString();
$('#basetree').tree({
チェックボックス: true、
アニメーション化: true、
URL:treeUrl "&coln="escape(name.toString()),
カスケードチェック: 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({
入力: "POST"、
URL: "../DataAshx/getTreeNode.ashx?pid="node.id "&coln="escape(name.toString()) "&casn="escape(node.attributes.cas.toString()),
キャッシュ: false、
非同期: false、
データ型: "json",
成功: 関数(データ) {
if(nodekeep.indexOf(node.id)==-1)
{
append(データ, ノード);
nodeExp = true;
}
}
});
$("#radCollapse").removeAttr("checked");
}、
onLoadError:関数(エラー)
{
$.messager.alert('提案', '查询语出错', 'error');
if(nodeExp==false)
{
$("#basetree").children().remove();
}
}、
onLoadSuccess:関数(成功)
{
var child=$("#basetree").children().length;
noinf ;
if(child==0&&noinf>1)
{
$.messager.alert('提案', 'データ不存在', '情報');
}
}
});
}
function TreeWindowClose() {
$('#treewindow').window('close');
ノードキープ="";
ノードキープ=false;
}
関数treeWindowSubmit() {
var ノード = $('#basetree').tree('getChecked');
var info = '';
if (nodes.length > 0) {
for (var i = 0; i
if (情報 != '') { 情報 = ','; }
info = ノード[i].text;
}
//alert(JSON.stringify(nodes));
}
他 {
var ノード = $('#basetree').tree('getSelected');
if (ノード != null) {
情報 = ノード.テキスト;
}
}
$("#" 行).val(情報);
$('#treewindow').window('close');
ノードキープ="";
nodeExp=false;
}
// 全部展开
関数collapseAll() {
$("#radCollapse").attr("チェック済み", "チェック済み");
var ノード = $('#basetree').tree('getSelected');
if (ノード) {
$('#basetree').tree('collapseAll', node.target);
} else {
$('#basetree').tree('collapseAll');
}
}
// 全部收缩
function ExpandAll() {
var ノード = $('#basetree').tree('getSelected');
if (ノード) {
$('#basetree').tree('expandAll', node.target);
} else {
$('#basetree').tree('expandAll');
}
}
//增加子节点
関数 append(datas,cnode) {
var ノード = cnode;
$('#basetree').tree('append', {
親: ノード.ターゲット、
データ: データ
});
ノードキープ = "," ノード.id;
}
// 再追加ダウンロード
関数 reload() {
var ノード = $('#basetree').tree('getSelected');
if (ノード) {
$('#basetree').tree('reload', node.target);
} else {
$('#basetree').tree('reload');
}
}
//删除子节点
関数削除() {
var ノード = $('#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 を使用;
パブリック クラス getTreeNode : IHttpHandler、System.Web.SessionState.IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "テキスト/プレーン";
DataTable dt = (DataTable)context.Session["viewmaintain"];
stringparentId = string.Empty;
文字列結果Str = string.Empty;
文字列属性 = string.Empty;
文字列colName = string.Empty;
string sql = string.Empty;
string Casname = string.Empty;
bool Colt = 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;
その間 (ポイント)
{
for (int i = 0; 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();
}
それ以外
{
コルト = 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)
{
コルト = true;
sql = dt.Rows[i]["view_sql"].ToString();
休憩;
}
}
}
}
試してみてください
{
if (parentId != "" && Colt == true)
{
//ここでは省略して、データ列表の代コードを取得します
リスト<ツリー情報> ltree = DAL_TreeInfo.GetItemValue(parentId, sql);
resultStr = "";
resultStr = "[";
if (ltree.Count > 0)
{
foreach (ltree 内の TreeInfo 項目)
{
属性 = "";
属性 = "{"cas":"" カス名;
属性 = "","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 = "]";
}
それ以外
{
resultStr = "[]";
}
}
catch (例外例)
{
resultStr = "出错";
}
context.Response.Write(resultStr);
}
public bool IsReusable
{
を入手
{
false を返します;
}
}
}
関連するコードはすべて上に記載されていますが、現在では、このような方法でしか解決できず、時間をかけてツリーを展開し、削除ポイントを追加する方法を実行することで、より簡単に実現できます。 🎜>
小弟在此献丑了，不知道各位家，同仁有不遇似似的問題，或者其他更好解決法，欢迎在这里。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
