A brief analysis of the tree usage guide in jQuery EasyUI_jquery

This article records that when leading members to develop a small module function, they needed to use pop-up windows to load tree-like cascade unit selections, and finally decided to use the jQuery EasyUI plug-in for development. However, I encountered a lot of trouble when using the tree plug-in in EasyUI. In order to improve the display speed of the pop-up tree, we use asynchronous loading of node values. First, the root node is loaded, and then the child nodes are loaded according to the clicked node.

Often the results are different from what is expected. I have been confused for a few days. After expansion, the child nodes are dynamically loaded, but after shrinking, the previously filled data cannot be cleared; when expanding for the second time, the child nodes are loaded again. Once again, the data is displayed repeatedly, and there is no method to clear the child nodes. After trying various ways to solve this problem, we can only load the values ​​of child nodes in another form. Save each node value and determine whether it already exists. If it exists, load it without loading.

See examples for two methods:

Copy code The code is as follows:

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 != '') { info = ','; }
            info = nodes[i].text;
        }
        //alert(JSON.stringify(nodes));
    }
    else {
        var node = $('#basetree').tree('getSelected');
        if (node != null) {
            info = node.text;               
        }
    }
    $("#" rows).val(info);
    $('#treewindow').window('close');
    nodekeep="";
    nodeExp=false;
}
//全部展开
function collapseAll() {
    $("#radCollapse").attr("checked", "checked");
    var node = $('#basetree').tree('getSelected');
    if (node) {
        $('#basetree').tree('collapseAll', node.target);
    } else {
        $('#basetree').tree('collapseAll');
    }
}
//全部收缩
function expandAll() {
    var node = $('#basetree').tree('getSelected');
    if (node) {
        $('#basetree').tree('expandAll', node.target);
    } else {
        $('#basetree').tree('expandAll');
    }
}
//增加子节点
function append(datas,cnode) {
    var node = cnode;
    $('#basetree').tree('append', {
        parent: node.target,
        data: datas
    });
    nodekeep ="," node.id;
}
//重新加载
function reload() {
    var node = $('#basetree').tree('getSelected');
    if (node) {
        $('#basetree').tree('reload', node.target);
    } else {
        $('#basetree').tree('reload');
    }
}
//删除子节点
function remove() {
    var node = $('#basetree').tree('getSelected');
    $('#basetree').tree('remove',node.target);
}

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

复制代码 代码如下:

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

 
　　关键性的代码都已经在上面了，目前也就只能想到这种办法来解决了，有时间的话可以给tree扩展一下，添加一个清除子节点的方法，这样应该实现起来会更容易方便。

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