EasyUI中的tree用法介绍


Posted in Javascript onNovember 01, 2011

真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了。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格式数据:
<%@ 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扩展一下,添加一个清除子节点的方法,这样应该实现起来会更容易方便。

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

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

作者:ZHF


Javascript 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
js倒计时简单实现代码
Aug 11 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
实现高性能javascript的注意事项
May 27 Javascript
jQuery代码优化 事件委托篇
Nov 01 #Javascript
jQuery代码优化 遍历篇
Nov 01 #Javascript
jQuery代码优化 选择符篇
Nov 01 #Javascript
jQuery代码优化之基本事件
Nov 01 #Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 #Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 #Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 #Javascript
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
详解Python迭代和迭代器
2016/03/28 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
商务主管岗位职责
2013/12/08 职场文书
投资意向书范本
2014/04/01 职场文书
司法局火灾防控方案
2014/06/05 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
迎新生欢迎词
2015/01/23 职场文书
横店影视城导游词
2015/02/06 职场文书
个人年底工作总结
2015/03/10 职场文书
信访维稳承诺书
2015/05/04 职场文书
公司人力资源管理制度
2015/08/05 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs