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

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 était 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 la deuxième expansion ; , les nœuds enfants sont à nouveau chargés. Une fois de plus, les données sont affichées à plusieurs reprises et il n'existe aucune méthode pour effacer les nœuds enfants. Après avoir essayé différentes manières de résoudre ce problème, nous ne pouvons charger les valeurs des nœuds enfants que sous une autre forme. Enregistrez chaque valeur de nœud et déterminez si elle existe déjà, chargez-la sans la charger.

Voir des exemples pour deux méthodes :

Copier le code Le code est le suivant :

var treeTitle = '选择列表';
var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1';
var nodeExp=false;
var nodekeep="";
var lignes ;
var noinf=0;
$(fonction() {
    $('#treewindow').window({
        titre : titre de l'arbre,
        largeur : 400,
        hauteur : 400,
        modal : vrai,
        ombre : fausse,
        fermé : vrai,
        redimensionnable : faux,
        maximisable : faux,
        minimisable : faux,
        pliable : faux
    });
});
fonction treeWindowOpen(nom,rowIndx) {
    $('#treewindow').window('open');
    nodekeep="";
    nodeExp=false;
    rows=rowIndx.toString();
    $('#basetree').tree({
        case à cocher : vrai,
        animer : vrai,
        url : treeUrl "&coln=" escape(name.toString()),
        cascadeCheck : vrai,
        onlyLeafCheck : faux,
        onBeforeExpand : fonction (nœud, param) {
//------------第一种方法：异步加载子节点值-------------
//            $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString());
//------------第二种方法：Ajax方法返回子节点Json值，使用append方法加载子节点      
        $.ajax({
                tapez : "POST",
                url : "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString()) "&casn=" escape(node.attributes.cas.toString()),
                cache : faux,
                asynchrone : faux,
                Type de données : "json",
                succès : fonction (données) {
                    if(nodekeep.indexOf(node.id)==-1)
                    {
                     append(données, nœud);
                     nodeExp = vrai;
                    >
                >
            });
            $("#radCollapse").removeAttr("checked");
        },
        onLoadError:fonction(Erreur)
        {
            $.messager.alert('提示', '查询语句出错', 'error');
            si(nodeExp==false)
            {
                $("#basetree").children().remove();
            >
        },
        onLoadSuccess :fonction (succès)
        {
            var enfant=$("#basetree").children().length;
            noinf ;
            si(enfant==0&&noinf>1)
            {
                $.messager.alert('提示', '数据不存在', 'Info');
            >
        >
    });
>
fonction treeWindowClose() {
    $('#treewindow').window('close');
    nodekeep="";
    nodekeep=false;
>
fonction treeWindowSubmit() {
    var nodes = $('#basetree').tree('getChecked');
    var info = '';
    if (nodes.length > 0) {
        pour (var i = 0; i < nodes.length; i ) {
            si (info != '') { info = ','; >
            info = nœuds[i].text;
        >
        //alerte(JSON.stringify(nodes));
    >
    sinon {
        var node = $('#basetree').tree('getSelected');
        if (noeud != null) {
            info = noeud.texte;               
        >
    >
    $("#" lignes).val(info);
    $('#treewindow').window('close');
    nodekeep="";
    nodeExp=false;
>
//全部展开
fonction réduireTout() {
    $("#radCollapse").attr("checked", "checked");
    var node = $('#basetree').tree('getSelected');
    if (nœud) {
        $('#basetree').tree('collapseAll', node.target);
    } autre {
        $('#basetree').tree('collapseAll');
    >
>
//全部收缩
fonction expandAll() {
    var node = $('#basetree').tree('getSelected');
    if (nœud) {
        $('#basetree').tree('expandAll', node.target);
    } autre {
        $('#basetree').tree('expandAll');
    >
>
//增加子节点
fonction ajouter (données, cnode) {
    var noeud = cnode;
    $('#basetree').tree('append', {
        parent : node.target,
        données : données
    });
    nodekeep ="," node.id;
>
//重新加载
fonction recharger() {
    var node = $('#basetree').tree('getSelected');
    if (nœud) {
        $('#basetree').tree('reload', node.target);
    } autre {
        $('#basetree').tree('reload');
    >
>
//删除子节点
fonction supprimer() {
    var node = $('#basetree').tree('getSelected');
    $('#basetree').tree('remove',node.target);
>

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

复制代码 代码如下 :

<%@ WebHandler Language="C#" Class="getTreeNode" %>
en utilisant le système ;
en utilisant System.Collections;
en utilisant System.Data;
en utilisant System.Linq;
en utilisant System.Web ;
en utilisant System.Web.Services;
en utilisant System.Web.Services.Protocols ;
en utilisant System.Xml.Linq;
en utilisant System.Collections.Generic;

Classe publique getTreeNode : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{
    public void ProcessRequest (contexte HttpContext)
    {
        context.Response.ContentType = "text/plain";
        DataTable dt = (DataTable)context.Session["viewmaintain"];
        string parentId = string.Empty;
        string resultStr = string.Empty;
        attributs de chaîne = string.Empty;
        string colName = string.Empty;
        string sql = string.Empty;
        string Casname = string.Empty;
        bool colt = faux ;
        string icon = "icône-profil";
        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());
            si (dt != null)
            {
                bool pt = vrai ;
                tandis que (pt)
                {
                    pour (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();
                            >
                            d'autre
                            {
                                poulain = vrai ;
                                sql = dt.Rows[i]["view_sql"].ToString();
                                pt = faux ;
                            >
                            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());
            si (dt != null)
            {
                pour (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)
                    {
                        poulain = vrai ;
                        sql = dt.Rows[i]["view_sql"].ToString();
                        pause;
                    >
                >
            >
        >
        essayez
        {
            if (parentId != "" && colt == true)
            {
                //此处省略得到数据列表的代码
                Liste ltree = DAL_TreeInfo.GetItemValue(parentId, sql);
                resultStr = "";
                resultStr = "[";
                si (ltree.Count > 0)
                {
                    foreach (élément TreeInfo dans ltree)
                    {
                        attributs = "";
                        attributs = "{"cas": "" Casname;
                        attributs = "","val":"" item._text ""}";
                        resultStr = "{";
                        resultStr = string.Format(""id": "{0}", "text": "{1}", "iconCls": "{2}", "attributs": {3}, "state": " fermé"", item._id, item._text, icône, attributs);
                        resultStr = "},";
                    >
                    resultStr = resultStr.Substring(0, resultStr.Length - 1);
                >
                resultStr = "]";
            >
            d'autre
            {
                resultStr = "[]";
            >
        >
        attraper (Exception ex)
        {
            resultStr = "出错";
        >
        contexte.Response.Write(resultStr);
    >
    public bool est réutilisable
    {
        obtenir
        {
            retourner faux ;
        >
    >
>

 
　　关键性的代码都已经在上面了，有时间的话可以给tree扩展添加一个清除子节点的方法，这样应该实现起来会更容易方便。

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