浅析jQuery EasyUI中的tree使用指南

前端技术 2023/09/07 JavaScript

  本文记录的是带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用jQuery+EasyUI插件进行开发。但是在使用EasyUI中tree的插件时,碰到了不少麻烦。为了提供弹出树的显示速度,就采用异步加载数节点值,首先先加载根节点,然后根据点击的节点展开加载子节点。

  往往结果和预期的都不一样,困惑了几天,展开后子节点是动态加载了,但是收缩后无法清空之前填充的数据;第二次在展开时,子节点又被重复加载了一遍,造成了数据重复显示,并没有提供清除子节点的方法。想尽了各种办法来解决这个问题,只能换另一种形式加载子节点的值了,把每一个节点值保存起来,判断是否已经存在,存在就不在去加载。

  两种方法见实例:

复制代码 代码如下:

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

本文地址:https://www.stayed.cn/item/19815

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。