浅析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 相关文章推荐
裁剪字符串trim()自定义改进版
Apr 10 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 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的ASP防火墙
2006/10/09 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
js实现下一页页码效果
2017/03/07 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python关键字and和or用法实例
2015/05/28 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
领导失职检讨书
2014/02/24 职场文书
中秋手机店促销方案
2014/06/16 职场文书
法学自荐信
2014/06/20 职场文书
会议欢迎词范文
2015/01/27 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python