jQuery EasyUI_jquery のツリー使用ガイドの簡単な分析

この記事では、メンバーを率いて小さなモジュール関数を開発する際、ポップアップ ウィンドウを使用してツリー状のカスケード ユニットの選択を読み込む必要があり、最終的に開発に 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 を返します;
        }
    }
}

 
　　関連するコードはすべて上に記載されていますが、現在では、このような方法でしか解決できず、時間をかけてツリーを展開し、削除ポイントを追加する方法を実行することで、より簡単に実現できます。 🎜> 小弟在此献丑了，不知道各位家，同仁有不遇似似的問題，或者其他更好解決法，欢迎在这里。