真的是太忙了，本应该有好多东西可以写，但是没什么闲时间，每次想到写的时候，来点事就又给忘了。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 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 {
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 {
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