ajax与easyui树节点,EasyUI中的tree用法介绍

真的是太忙了，本应该有好多东西可以写，但是没什么闲时间，每次想到写的时候，来点事就又给忘了。10月最后一天了，在忙也得把这篇文章写完，不然又得多一个空白月了。

这是之前带领成员开发一个小模块功能的时候，需要用到弹出窗口加载树状级联单位选择，最后决定用采用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格式数据：

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 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扩展一下，添加一个清除子节点的方法，这样应该实现起来会更容易方便。

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

同时也感谢各位抽出宝贵的时间阅读文章，让我们共同进步，共同分享交流，在节省他人的时间就是提高自己~~~

作者：ZHF