浅析jQuery EasyUI中的tree使用指南


Posted in Javascript onDecember 18, 2014

本文记录的是带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用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;

        }

    }

}

 

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

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

Javascript 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 #Javascript
JavaScript获取Url里的参数
Dec 18 #Javascript
Javascript实现单张图片浏览
Dec 18 #Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 #Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 #Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 #Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 #Javascript
You might like
php比较两个绝对时间的大小
2014/01/31 PHP
php随机抽奖实例分析
2015/03/04 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
PHP运行模式汇总
2016/11/06 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python 正则表达式操作指南
2009/05/04 Python
Python重新引入被覆盖的自带function
2014/07/16 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
详解Python字典小结
2018/10/20 Python
python实现简易动态时钟
2018/11/19 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
python实现KNN近邻算法
2020/12/30 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
大学三年计划书范文
2014/04/30 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
Oracle表空间与权限的深入讲解
2021/11/17 Oracle