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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
Python 自动补全(vim)
2014/11/30 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
高三上学期学习自我评价
2014/04/23 职场文书
《恐龙》教学反思
2014/04/27 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
婚前协议书标准版
2014/10/19 职场文书
怎么写工作检讨书
2014/11/16 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
绿里奇迹观后感
2015/06/15 职场文书
技能培训通讯稿
2015/07/18 职场文书
详解pytorch创建tensor函数
2022/03/22 Python
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js