浅析jQuery EasyUI中的tree使用指南
本文记录的是带领成员开发一个小模块功能的时候，需要用到弹出窗口加载树状级联单位选择，最后决定用采用jQuery+EasyUI插件进行开发。但是在使用EasyUI中tree的插件时，碰到了不少麻烦。为了提供弹出树的显示速度，就采用异步加载数节点值，首先先加载根节点，然后根据点击的节点展开加载子节点。
往往结果和预期的都不一样，困惑了几天，展开后子节点是动态加载了，但是收缩后无法清空之前填充的数据；第二次在展开时，子节点又被重复加载了一遍，造成了数据重复显示，并没有提供清除子节点的方法。想尽了各种办法来解决这个问题，只能换另一种形式加载子节点的值了，把每一个节点值保存起来，判断是否已经存在，存在就不在去加载。
两种方法见实例：
vartreeTitle='选择列表';
vartreeUrl='../DataAshx/getTreeNode.ashx?pid=-1';
varnodeExp=false;
varnodekeep="";
varrows;
varnoinf=0;
$(function(){
$('#treewindow').window({
title:treeTitle,
width:400,
height:400,
modal:true,
shadow:false,
closed:true,
resizable:false,
maximizable:false,
minimizable:false,
collapsible:false
});
});
functiontreeWindowOpen(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)
{
varchild=$("#basetree").children().length;
noinf++;
if(child==0&&noinf>1)
{
$.messager.alert('提示','数据不存在','Info');
}
}
});
}
functiontreeWindowClose(){
$('#treewindow').window('close');
nodekeep="";
nodekeep=false;
}
functiontreeWindowSubmit(){
varnodes=$('#basetree').tree('getChecked');
varinfo='';
if(nodes.length>0){
for(vari=0;i<nodes.length;i++){
if(info!=''){info+=',';}
info+=nodes[i].text;
}
//alert(JSON.stringify(nodes));
}
else{
varnode=$('#basetree').tree('getSelected');
if(node!=null){
info=node.text;
}
}
$("#"+rows).val(info);
$('#treewindow').window('close');
nodekeep="";
nodeExp=false;
}
//全部展开
functioncollapseAll(){
$("#radCollapse").attr("checked","checked");
varnode=$('#basetree').tree('getSelected');
if(node){
$('#basetree').tree('collapseAll',node.target);
}else{
$('#basetree').tree('collapseAll');
}
}
//全部收缩
functionexpandAll(){
varnode=$('#basetree').tree('getSelected');
if(node){
$('#basetree').tree('expandAll',node.target);
}else{
$('#basetree').tree('expandAll');
}
}
//增加子节点
functionappend(datas,cnode){
varnode=cnode;
$('#basetree').tree('append',{
parent:node.target,
data:datas
});
nodekeep+=","+node.id;
}
//重新加载
functionreload(){
varnode=$('#basetree').tree('getSelected');
if(node){
$('#basetree').tree('reload',node.target);
}else{
$('#basetree').tree('reload');
}
}
//删除子节点
functionremove(){
varnode=$('#basetree').tree('getSelected');
$('#basetree').tree('remove',node.target);
}
页面getTreeNode.ashx返回树节点JSON格式数据：
<%@WebHandlerLanguage="C#"Class="getTreeNode"%> usingSystem; usingSystem.Collections; usingSystem.Data; usingSystem.Linq; usingSystem.Web; usingSystem.Web.Services; usingSystem.Web.Services.Protocols; usingSystem.Xml.Linq; usingSystem.Collections.Generic;
publicclassgetTreeNode:IHttpHandler,System.Web.SessionState.IRequiresSessionState { publicvoidProcessRequest(HttpContextcontext) { context.Response.ContentType="text/plain"; DataTabledt=(DataTable)context.Session["viewmaintain"]; stringparentId=string.Empty; stringresultStr=string.Empty; stringattributes=string.Empty; stringcolName=string.Empty; stringsql=string.Empty; stringCasname=string.Empty; boolcolt=false; stringicon="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) { boolpt=true; while(pt) { for(inti=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"]))) { stringcasnName=HttpUtility.UrlDecode(context.Request.QueryString["casn"].ToString()); colName=HttpUtility.UrlDecode(context.Request.QueryString["coln"].ToString()); if(dt!=null) { for(inti=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(TreeInfoiteminltree) { 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(Exceptionex) { resultStr="出错"; } context.Response.Write(resultStr); } publicboolIsReusable { get { returnfalse; } } }