Eine kurze Analyse des Baumverwendungshandbuchs in jQuery EasyUI

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;
        }
    }
}