Eine kurze Analyse des Baumverwendungshandbuchs in jQuery EasyUI_jquery

In diesem Artikel wird berichtet, dass Mitglieder bei der Entwicklung einer kleinen Modulfunktion Popup-Fenster verwenden mussten, um baumartige Kaskadeneinheitsauswahlen zu laden, und sich schließlich für die Verwendung des jQuery EasyUI-Plug-Ins für die Entwicklung entschieden haben. Bei der Verwendung des Baum-Plug-Ins in EasyUI sind jedoch große Probleme aufgetreten. Um die Anzeigegeschwindigkeit des Popup-Baums zu verbessern, verwenden wir das asynchrone Laden von Knotenwerten. Zuerst wird der Stammknoten geladen und dann werden die untergeordneten Knoten entsprechend dem angeklickten Knoten geladen.

Oftmals weichen die Ergebnisse von den Erwartungen ab. Nach der Erweiterung werden die untergeordneten Knoten dynamisch geladen, aber nach dem Verkleinern können die zuvor gefüllten Daten beim zweiten Erweitern nicht gelöscht werden , werden die untergeordneten Knoten erneut geladen, die Daten werden wiederholt angezeigt und es gibt keine Methode zum Löschen der untergeordneten Knoten. Nachdem wir verschiedene Möglichkeiten zur Lösung dieses Problems ausprobiert haben, können wir die Werte der untergeordneten Knoten nur in einer anderen Form laden und feststellen, ob sie bereits vorhanden sind.

Siehe Beispiele für zwei Methoden:

Code kopieren Der Code lautet wie folgt:

var treeTitle = '选择列表';
var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1';
var nodeExp=false;
var nodekeep="";
var rows;
var noinf=0;
$(function() {
    $('#treewindow').window({
        Titel: BaumTitel,
        Breite: 400,
        Höhe: 400,
        modal: wahr,
        Schatten: falsch,
        geschlossen: wahr,
        veränderbar: falsch,
        maximierbar: falsch,
        minimierbar: falsch,
        zusammenklappbar: falsch
    });
});
Funktion treeWindowOpen(name,rowIndx) {
    $('#treewindow').window('open');
    nodekeep="";
    nodeExp=false;
    rows=rowIndx.toString();
    $('#basetree').tree({
        Kontrollkästchen: wahr,
        animieren: wahr,
        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({
                Typ: „POST“,
                URL: "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString()) "&casn=" escape(node.attributes.cas.toString()),
                Cache: falsch,
                asynchron: false,
                Datentyp: „json“,
                Erfolg: Funktion(Daten) {
                    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');
            }
        }
    });
}
Funktion treeWindowClose() {
    $('#treewindow').window('close');
    nodekeep="";
    nodekeep=false;
}
Funktion 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));
    }
    sonst {
        var node = $('#basetree').tree('getSelected');
        if (node ​​!= null) {
            info = node.text;               
        }
    }
    $("#" rows).val(info);
    $('#treewindow').window('close');
    nodekeep="";
    nodeExp=false;
}
//全部展开
Funktion collapAll() {
    $("#radCollapse").attr("checked", "checked");
    var node = $('#basetree').tree('getSelected');
    if (Knoten) {
        $('#basetree').tree('collapseAll', node.target);
    } sonst {
        $('#basetree').tree('collapseAll');
    }
}
//全部收缩
Funktion expandAll() {
    var node = $('#basetree').tree('getSelected');
    if (Knoten) {
        $('#basetree').tree('expandAll', node.target);
    } sonst {
        $('#basetree').tree('expandAll');
    }
}
//增加子节点
Funktion append(datas,cnode) {
    var node = cnode;
    $('#basetree').tree('append', {
        übergeordnetes Element: node.target,
        Daten: Daten
    });
    nodekeep ="," node.id;
}
//重新加载
Funktion reload() {
    var node = $('#basetree').tree('getSelected');
    if (Knoten) {
        $('#basetree').tree('reload', node.target);
    } sonst {
        $('#basetree').tree('reload');
    }
}
//删除子节点
Funktion remove() {
    var node = $('#basetree').tree('getSelected');
    $('#basetree').tree('remove',node.target);
}

　　页面getTreeNode.ashx返回树节点JSON格式数据：

复制代码 代码如下:

<%@ WebHandler Language="C#" Class="getTreeNode" %>
mit System;
mit System.Collections;
mit System.Data;
mit System.Linq;
mit System.Web;
mit System.Web.Services;
mit System.Web.Services.Protocols;
mit System.Xml.Linq;
mit System.Collections.Generic;

öffentliche Klasse 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-Attribute = 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();
                            }
                            sonst
                            {
                                colt = true;
                                sql = dt.Rows[i]["view_sql"].ToString();
                                pt = false;
                            }
                            Pause;
                        }
                    }
                }
            }
        }
        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();
                        Pause;
                    }
                }
            }
        }
        versuche es
        {
            if (parentId != "" && colt == true)
            {
                //此处省略得到数据列表的代码
                Liste ltree = DAL_TreeInfo.GetItemValue(parentId, sql);
                resultStr = "";
                resultStr = "[";
                if (ltree.Count > 0)
                {
                    foreach (TreeInfo-Element in ltree)
                    {
                        attributes = "";
                        attributes = "{"cas":"" Casname;
                        attributes = "","val="" item._text ""}";
                        resultStr = "{";
                        resultStr = string.Format(""id": "{0}", "text": "{1}", "iconCls": "{2}", "attributes": {3}, "state": " geschlossen"", item._id, item._text, icon, attributes);
                        resultStr = "},";
                    }
                    resultStr = resultStr.Substring(0, resultStr.Length - 1);
                }
                resultStr = "]";
            }
            sonst
            {
                resultStr = "[]";
            }
        }
        Catch (Ausnahme ex)
        {
            resultStr = "出错";
        }
        context.Response.Write(resultStr);
    }
    public bool IsReusable
    {
        bekommen
        {
            return false;
        }
    }
}

 
　　关键性的代码都已经在上面了, 目前也就只能想到这种办法来解决了, 有时间的话可以给给tree扩展

　　小弟在此献丑了, 不知道各位专家、同仁有没有遇到类似的问题,或者有其它更好的解决办法，欢迎在这交流.