Une brève analyse du guide d'utilisation de l'arborescence dans jQuery EasyUI

Cet article rapporte que lorsqu'ils ont amené les membres à développer une petite fonction de module, ils ont dû utiliser des fenêtres contextuelles pour charger des sélections d'unités en cascade de type arborescent, et ont finalement décidé d'utiliser le plug-in jQuery EasyUI pour le développement. Cependant, j'ai rencontré beaucoup de problèmes lors de l'utilisation du plug-in d'arborescence dans EasyUI. Afin d'améliorer la vitesse d'affichage de l'arborescence contextuelle, nous utilisons le chargement asynchrone des valeurs des nœuds. Tout d'abord, le nœud racine est chargé, puis les nœuds enfants sont chargés en fonction du nœud cliqué.

Souvent, les résultats sont différents de ce qui est attendu. J'ai été confus pendant quelques jours. Après l'expansion, les nœuds enfants sont chargés dynamiquement, mais après la réduction, les données précédemment remplies ne peuvent pas être effacées lors de l'expansion ; la deuxième fois, les nœuds enfants sont à nouveau chargés. Cela a été chargé à plusieurs reprises, ce qui a entraîné un affichage répété des données, et aucune méthode n'a été fournie pour effacer les nœuds enfants. Après avoir essayé différentes manières de résoudre ce problème, je ne peux charger la valeur du nœud enfant que sous une autre forme. Enregistrez la valeur de chaque nœud et déterminez si elle existe déjà. Si elle existe, elle ne sera pas chargée.

Voir des exemples pour deux méthodes :

var treeTitle = '选择列表';
var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1';
var nodeExp=false;
var nodekeep="";
var rows;
var noinf=0;
$(function() {
    $('#treewindow').window({
        title: treeTitle,
        width: 400,
        height: 400,
        modal: true,
        shadow: false,
        closed: true,
        resizable: false,
        maximizable: false,
        minimizable: false,
        collapsible: false
    });
});
function treeWindowOpen(name,rowIndx) {
    $('#treewindow').window('open');
    nodekeep="";
    nodeExp=false;
    rows=rowIndx.toString();
    $('#basetree').tree({
        checkbox: true,
        animate: true,
        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({
                type: "POST",
                url: "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString())+"&casn="+escape(node.attributes.cas.toString()),
                cache: false,
                async: false,
                dataType: "json",
                success: function(data) {
                    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');
            }
        }
    });
}
function treeWindowClose() {
    $('#treewindow').window('close');
    nodekeep="";
    nodekeep=false;
}
function treeWindowSubmit() {
    var nodes = $('#basetree').tree('getChecked');
    var info = '';
    if (nodes.length > 0) {
        for (var i = 0; i < nodes.length; i++) {
            if (info != &#39;&#39;) { info += &#39;,&#39;; }
            info += nodes[i].text;
        }
        //alert(JSON.stringify(nodes));
    }
    else {
        var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
        if (node != null) {
            info = node.text;                
        }
    }
    $("#"+rows).val(info);
    $(&#39;#treewindow&#39;).window(&#39;close&#39;);
    nodekeep="";
    nodeExp=false;
}
//全部展开
function collapseAll() {
    $("#radCollapse").attr("checked", "checked");
    var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
    if (node) {
        $(&#39;#basetree&#39;).tree(&#39;collapseAll&#39;, node.target);
    } else {
        $(&#39;#basetree&#39;).tree(&#39;collapseAll&#39;);
    }
}
//全部收缩
function expandAll() {
    var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
    if (node) {
        $(&#39;#basetree&#39;).tree(&#39;expandAll&#39;, node.target);
    } else {
        $(&#39;#basetree&#39;).tree(&#39;expandAll&#39;);
    }
}
//增加子节点
function append(datas,cnode) {
    var node = cnode;
    $(&#39;#basetree&#39;).tree(&#39;append&#39;, {
        parent: node.target,
        data: datas
    });
    nodekeep+=","+node.id;
}
//重新加载
function reload() {
    var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
    if (node) {
        $(&#39;#basetree&#39;).tree(&#39;reload&#39;, node.target);
    } else {
        $(&#39;#basetree&#39;).tree(&#39;reload&#39;);
    }
}
//删除子节点
function remove() {
    var node = $(&#39;#basetree&#39;).tree(&#39;getSelected&#39;);
    $(&#39;#basetree&#39;).tree(&#39;remove&#39;,node.target);
}

La page getTreeNode.ashx renvoie les données au format JSON du nœud d'arbre :

<%@ WebHandler Language="C#" Class="getTreeNode" %>
using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;
public class 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 attributes = 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();
                            }
                            else
                            {
                                colt = true;
                                sql = dt.Rows[i]["view_sql"].ToString();
                                pt = false;
                            }
                            break;
                        }
                    }
                }
            }
        }
        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();
                        break;
                    }
                }
            }
        }
        try
        {
            if (parentId != "" && colt == true)
            {
                //此处省略得到数据列表的代码
                List<TreeInfo> ltree = DAL_TreeInfo.GetItemValue(parentId, sql);
                resultStr = "";
                resultStr += "[";
                if (ltree.Count > 0)
                {
                    foreach (TreeInfo item in ltree)
                    {
                        attributes = "";
                        attributes += "{\"cas\":\"" + Casname;
                        attributes += "\",\"val\":\"" + item._text + "\"}";
                        resultStr += "{";
                        resultStr += string.Format("\"id\": \"{0}\", \"text\": \"{1}\", \"iconCls\": \"{2}\", \"attributes\": {3}, \"state\": \"closed\"", item._id, item._text, icon, attributes);
                        resultStr += "},";
                    }
                    resultStr = resultStr.Substring(0, resultStr.Length - 1);
                }
                resultStr += "]";
            }
            else
            {
                resultStr = "[]";
            }
        }
        catch (Exception ex)
        {
            resultStr = "出错";
        }
        context.Response.Write(resultStr);
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Les codes clés sont déjà ci-dessus, actuellement ceci est le seul moyen de le résoudre. Si vous avez le temps, vous pouvez développer l'arborescence et ajouter une méthode pour effacer les nœuds enfants, ce qui devrait être plus facile et plus pratique à mettre en œuvre.

Pour plus d'articles sur le guide d'utilisation des arbres dans jQuery EasyUI, veuillez faire attention au site Web PHP chinois !

Articles connexes :

pagination de la grille de données easyui 4, mises en page easyUI-sept (mise en page)

Première introduction au fonctionnement général de la base de données avant- fin easyui-datagrid, formulaire (php), easyuidatagrid

JQuery EasyUI Tutorial-Panel (Panel)