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’);