欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery EasyUI中的tree使用指南

程序员文章站 2022-11-30 23:52:57
  本文记录的是带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用jquery+easyui插件进行开发。但是在使用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扩展一下,添加一个清除子节点的方法,这样应该实现起来会更容易方便。