淺析jQuery EasyUI中的tree使用指南_jquery

　　本文記錄的是帶領成員開發一個小模組功能的時候，需要用到彈出窗口加載樹狀級聯單位選擇，最後決定用採用jQuery EasyUI插件進行開發。但在使用EasyUI中tree的外掛時，碰到了不少麻煩。為了提供彈出樹的顯示速度，就採用非同步載入數節點值，先載入根節點，再根據點選的節點展開載入子節點。

　　往往結果和預期的都不一樣，困惑了幾天，展開後子節點是動態加載了，但是收縮後無法清空之前填充的數據；第二次在展開時，子節點又被重複加載了一遍，造成了資料重複顯示，並沒有提供清除子節點的方法。想盡了各種辦法來解決這個問題，只能換另一種形式載入子節點的值了，把每一個節點值保存起來，判斷是否已經存在，存在就不在去載入。

　　兩種方法見實例：

複製程式碼 程式碼如下:

var treeTitle = '選擇列表';
var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1';
var nodeExp=false;
var nodekeep="";
var 行；
var noinf=0;
$(函數() {
    $('#treewindow').window({
        標題：樹標題，
        寬度：400，
        高度：400，
        模態：true，
        陰影：假，
        結束：正確，
        可調整大小：假，
        最大化：假，
        可最小化：假，
        可折疊：假
    });
});
函數 treeWindowOpen(名稱,rowIndx) {
    $('#treewindow').window('open');
    節點保持=“”;
    nodeExp=false;
    rows=rowIndx.toString();
    $('#basetree').tree({
        核取方塊：true，
        動畫：真實，
        url: treeUrl "&coln=" escape(name.toString()),
        級聯檢查：true，
        onlyLeafCheck：假，
        onBeforeExpand: 函數(節點, 參數) {
//------------第一種方法：非同步載入子節點值------------
//            $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString());
//------------排名方法：Ajax方法回傳子節點Json值，使用append方法載入子節點      
        $.ajax({
                輸入：「POST”，
                url: "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString()) "&casn=" eoode.attributscapees.casode.attri                 以快取：假，
                非同步：假，
                資料類型：“json”，
                成功：函數（資料）{
                    if(nodekeep.indexOf(node.id)==-1)
                    {
                     而已追加（數據，節點）；
                     nodeExp = true;
                    }
                }
            });
            $("#radCollapse").removeAttr("選取");
        },
        onLoadError:函數(錯誤)
        {
            $.messager.alert('提示', '查詢語句錯誤', 'error');
            if(nodeExp==false)
            {
                $("#basetree").children().remove();
            }
        },
        onLoadSuccess:function(成功)
        {
            var child=$("#basetree").children().length;
            noinf ;
            if(child==0&&noinf>1)
            {
                $.messager.alert('提示', '存在資料不存在', 'Info');
            }
        }
    });
}
函數treeWindowClose() {
    $('#treewindow').window('close');
    節點保持=“”;
    節點保持=假;
}
函數treeWindowSubmit() {
    var 節點 = $('#basetree').tree('getChecked');
    var info = '';
    if (nodes.length > 0) {
        for (var i = 0; i             if (info != '') { info = ','; }
            訊息 = 節點[i].text;
        }
        //alert(JSON.stringify(nodes));
    }
    否則{
        var node = $('#basetree').tree('getSelected');
        if (節點！= null) {
            訊息=節點.文字；               
        }
    }
    $("#" 行).val(info);
    $('#treewindow').window('close');
    節點保持=“”;
    nodeExp=false;
}
//全部展開
函數collapseAll() {
    $("#radCollapse").attr("已檢查", "已檢查");
    var node = $('#basetree').tree('getSelected');
    if (節點) {
        $('#basetree').tree('collapseAll', node.target);
    } 其他 {
        $('#basetree').tree('collapseAll');
    }
}
//全部收縮
函數expandAll() {
    var node = $('#basetree').tree('getSelected');
    if (節點) {
        $('#basetree').tree('expandAll', node.target);
    } 其他 {
        $('#basetree').tree('expandAll');
    }
}
// 增加子節點
函數追加（數據，cnode）{
    var node = cnode;
    $('#basetree').tree('append', {
        父級：node.target，
        資料：資料
    });
    nodekeep =“,”node.id;
}
//重新載入
函數重新載入() {
    var node = $('#basetree').tree('getSelected');
    if (節點) {
        $('#basetree').tree('reload', node.target);
    } 其他 {
        $('#basetree').tree('重新載入');
    }
}
//刪除子節點
函數刪除() {
    var node = $('#basetree').tree('getSelected');
    $('#basetree').tree('remove',node.target);
}

頁面getTreeNode.ashx傳回樹節點JSON格式資料：

複製程式碼程式碼如下：

使用系統；
使用 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 = "text/plain";
        DataTable dt = (DataTable)context.Session["viewmaintain"];
        stringparentId = string.Empty;
        字串 resultStr = string.Empty;
        字串屬性 = string.Empty;
        string colName = string.Empty;
        字串 sql = string.Empty;
        string Casname = string.Empty;
        bool colt = false;
        string icon = "圖示檔案";         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();
                            }
                            其他
                            {
                                小馬=真;
                                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)
                    {
                        小馬=真;
                        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":"" Casname;
                        屬性 = "","val":"" item._text ""}";
                        resultStr = "{";
resultStr = string.Format(""id": "{0}", "text": "{1}", "iconCls": "{2}", "屬性": {3}, "狀態": "已關閉""、item._id、item._text、圖示、屬性)；
                        resultStr = "},";
                    }
                    resultStr = resultStr.Substring(0, resultStr.Length - 1);
                }
                resultStr = "]";
            }
            其他
            {
                resultStr = "[]";
            }
        }
        catch（異常前）
        {
            resultStr = "錯誤";
        }
        context.Response.Write(resultStr);
    }
    public bool IsReusable
    {
        得到
        {
            回復錯誤；
        }
    }
}

 
　　關鍵性的程式碼都已經在上面了，目前只能想到這種辦法來了，有時間的話可以給樹擴展一下，添加一個清除子節點的方法，這樣應該實現起來會更容易方便。

小弟在此獻醜了，不知道各位專家、同仁有沒有遇到類似的問題，或者有其他更好的解決方法，歡迎在此交流。