1. 首页
  2. 编程与技术

浅析jQuery EasyUI中的tree使用指南

发布于 2016-08-29 07:55:37 | 164 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

EasyUI jQuery UI插件

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

这篇文章主要介绍了浅析jQuery EasyUI中的tree的用法,是根据个人对此的理解来实现的，需要的朋友可以参考下

　　本文记录的是带领成员开发一个小模块功能的时候，需要用到弹出窗口加载树状级联单位选择，最后决定用采用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扩展一下，添加一个清除子节点的方法，这样应该实现起来会更容易方便。

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



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务