小谈EasyUI中的tree用法
2024-05-09 19:44:45
不知不觉10月都结束了，又要到年底了。看看自己上次写过的文章后，已经2个月都没写东西了。真的是太忙了，本应该有好多东西可以写，但是没什么闲时间，每次想到写的时候，来点事就又给忘了。10月最后一天了，在忙也得把这篇文章写完，不然又得多一个空白月了。
这是之前带领成员开发一个小模块功能的时候，需要用到弹出窗口加载树状级联单位选择，最后决定用采用jQuery+EasyUI插件进行开发。但是在使用EasyUI中tree的插件时，碰到了不少麻烦。为了提供弹出树的显示速度，就采用异步加载数节点值，首先先加载根节点，然后根据点击的节点展开加载子节点。
往往结果和预期的都不一样，困惑了几天，展开后子节点是动态加载了，但是收缩后无法清空之前填充的数据；第二次在展开时，子节点又被重复加载了一遍，造成了数据重复显示，并没有提供清除子节点的方法。想尽了各种办法来解决这个问题，只能换另一种形式加载子节点的值了，把每一个节点值保存起来，判断是否已经存在，存在就不在去加载。
两种方法见实例：
View Code
1 var treeTitle = '选择列表'; 2 var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1'; 3 var nodeExp=false; 4 var nodekeep=""; 5 var rows; 6 var noinf=0; 7 $(function() { 8 $('#treewindow').window({ 9 title: treeTitle, 10 width: 400, 11 height: 400, 12 modal: true, 13 shadow: false, 14 closed: true, 15 resizable: false, 16 maximizable: false, 17 minimizable: false, 18 collapsible: false 19 }); 20 }); 21 function treeWindowOpen(name,rowIndx) { 22 $('#treewindow').window('open'); 23 nodekeep=""; 24 nodeExp=false; 25 rows=rowIndx.toString(); 26 $('#basetree').tree({ 27 checkbox: true, 28 animate: true, 29 url: treeUrl+"&coln="+escape(name.toString()), 30 cascadeCheck: true, 31 onlyLeafCheck: false, 32 onBeforeExpand: function(node, param) { 33 //------------第一种方法：异步加载子节点值------------- 34 // $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString()); 35 36 //------------第二种方法：Ajax方法返回子节点Json值，使用append方法加载子节点 37 $.ajax({ 38 type: "POST", 39 url: "../DataAshx/getTreeNode.ashx?pid=" + node.id+"&coln="+escape(name.toString())+"&casn="+escape(node.attributes.cas.toString()), 40 cache: false, 41 async: false, 42 dataType: "json", 43 success: function(data) { 44 if(nodekeep.indexOf(node.id)==-1) 45 { 46 append(data, node); 47 nodeExp = true; 48 } 49 } 50 }); 51 $("#radCollapse").removeAttr("checked"); 52 }, 53 onLoadError:function(Error) 54 { 55 $.messager.alert('提示', '查询语句出错', 'error'); 56 if(nodeExp==false) 57 { 58 $("#basetree").children().remove(); 59 } 60 }, 61 onLoadSuccess:function(success) 62 { 63 var child=$("#basetree").children().length; 64 noinf++; 65 if(child==0&&noinf>1) 66 { 67 $.messager.alert('提示', '数据不存在', 'Info'); 68 } 69 } 70 }); 71 72 } 73 function treeWindowClose() { 74 $('#treewindow').window('close'); 75 nodekeep=""; 76 nodekeep=false; 77 } 78 function treeWindowSubmit() { 79 var nodes = $('#basetree').tree('getChecked'); 80 var info = ''; 81 if (nodes.length > 0) { 82 for (var i = 0; i < nodes.length; i++) { 83 if (info != '') { info += ','; } 84 info += nodes[i].text; 85 } 86 //alert(JSON.stringify(nodes)); 87 } 88 else { 89 var node = $('#basetree').tree('getSelected'); 90 if (node != null) { 91 info = node.text; 92 } 93 } 94 $("#"+rows).val(info); 95 $('#treewindow').window('close'); 96 nodekeep=""; 97 nodeExp=false; 98 } 99 //全部展开100 function collapseAll() {101 $("#radCollapse").attr("checked", "checked");102 var node = $('#basetree').tree('getSelected');103 if (node) {104 $('#basetree').tree('collapseAll', node.target);105 } else {106 $('#basetree').tree('collapseAll');107 }108 }109 //全部收缩110 function expandAll() {111 var node = $('#basetree').tree('getSelected');112 if (node) {113 $('#basetree').tree('expandAll', node.target);114 } else {115 $('#basetree').tree('expandAll');116 }117 }118 //增加子节点119 function append(datas,cnode) {120 var node = cnode;121 $('#basetree').tree('append', {122 parent: node.target,123 data: datas124 });125 nodekeep+=","+node.id;126 }127 //重新加载128 function reload() {129 var node = $('#basetree').tree('getSelected');130 if (node) {131 $('#basetree').tree('reload', node.target);132 } else {133 $('#basetree').tree('reload');134 }135 }136 //删除子节点137 function remove() {138 var node = $('#basetree').tree('getSelected');139 $('#basetree').tree('remove',node.target);140 }页面getTreeNode.ashx返回树节点JSON格式数据：
View Code
1 <%@ WebHandler Language="C#" Class="getTreeNode" %> 2 3 using System; 4 using System.Collections; 5 using System.Data; 6 using System.Linq; 7 using System.Web; 8 using System.Web.Services; 9 using System.Web.Services.Protocols; 10 using System.Xml.Linq; 11 using System.Collections.Generic; 12 13 14 public class getTreeNode : IHttpHandler, System.Web.SessionState.IRequiresSessionState 15 { 16 17 public void ProcessRequest(HttpContext context) 18 { 19 context.Response.ContentType = "text/plain"; 20 DataTable dt = (DataTable)context.Session["viewmaintain"]; 21 string parentId = string.Empty; 22 string resultStr = string.Empty; 23 string attributes = string.Empty; 24 string colName = string.Empty; 25 string sql = string.Empty; 26 string Casname = string.Empty; 27 bool colt = false; 28 string icon = "icon-profile"; 29 if (!string.IsNullOrEmpty(context.Request.QueryString["pid"])) 30 { 31 parentId = context.Request.QueryString["pid"].ToString(); 32 } 33 if ((!string.IsNullOrEmpty(context.Request.QueryString["coln"])) && (string.IsNullOrEmpty(context.Request.QueryString["casn"]))) 34 { 35 36 colName = HttpUtility.UrlDecode(context.Request.QueryString["coln"].ToString()); 37 if (dt != null) 38 { 39 bool pt = true; 40 while (pt) 41 { 42 for (int i = 0; i < dt.Rows.Count; i++) 43 { 44 45 Casname = dt.Rows[i]["view_colname"].ToString(); 46 if (dt.Rows[i]["view_colname"].ToString() == colName) 47 { 48 if (dt.Rows[i]["view_cas"].ToString() != null&&dt.Rows[i]["view_cas"].ToString() !="") 49 { 50 colName = dt.Rows[i]["view_cas"].ToString(); 51 } 52 else 53 { 54 colt = true; 55 sql = dt.Rows[i]["view_sql"].ToString(); 56 pt = false; 57 } 58 59 break; 60 } 61 } 62 } 63 64 } 65 } 66 if ((!string.IsNullOrEmpty(context.Request.QueryString["casn"])) && (!string.IsNullOrEmpty(context.Request.QueryString["coln"]))) 67 { 68 69 string casnName = HttpUtility.UrlDecode(context.Request.QueryString["casn"].ToString()); 70 colName = HttpUtility.UrlDecode(context.Request.QueryString["coln"].ToString()); 71 if (dt != null) 72 { 73 for (int i = 0; i < dt.Rows.Count; i++) 74 { 75 Casname = dt.Rows[i]["view_colname"].ToString(); 76 if (dt.Rows[i]["view_cas"].ToString() == casnName && casnName != colName) 77 { 78 colt = true; 79 sql = dt.Rows[i]["view_sql"].ToString(); 80 break; 81 } 82 } 83 } 84 } 85 try 86 { 87 if (parentId != "" && colt == true) 88 { 89 //此处省略得到数据列表的代码 90 List<TreeInfo> ltree = DAL_TreeInfo.GetItemValue(parentId, sql); 91 resultStr = ""; 92 resultStr += "["; 93 if (ltree.Count > 0) 94 { 95 foreach (TreeInfo item in ltree) 96 { 97 attributes = ""; 98 attributes += "{\"cas\":\"" + Casname; 99 attributes += "\",\"val\":\"" + item._text + "\"}";100 resultStr += "{";101 resultStr += string.Format("\"id\": \"{0}\", \"text\": \"{1}\", \"iconCls\": \"{2}\", \"attributes\": {3}, \"state\": \"closed\"", item._id, item._text, icon, attributes);102 resultStr += "},";103 }104 resultStr = resultStr.Substring(0, resultStr.Length - 1);105 }106 resultStr += "]";107 }108 else109 {110 resultStr = "[]";111 }112 }113 catch (Exception ex)114 {115 resultStr = "出错";116 }117 118 context.Response.Write(resultStr);119 }120 121 public bool IsReusable122 {123 get124 {125 return false;126 }127 }128 }关键性的代码都已经在上面了，目前也就只能想到这种办法来解决了，有时间的话可以给tree扩展一下，添加一个清除子节点的方法，这样应该实现起来会更容易方便。
小弟在此献丑了，不知道各位专家、同仁有没有遇到类似的问题，或者有其它更好的解决办法，欢迎在这交流。
同时也感谢各位抽出宝贵的时间阅读文章，让我们共同进步，共同分享交流，在节省他人的时间就是提高自己~~~
转载于:https://www.cnblogs.com/ZHF/archive/2011/10/31/2229771.html
小谈EasyUI中的tree用法相关推荐
- ajax与easyui树节点,EasyUI中的tree用法介绍
真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了.10月最后一天了,在忙也得把这篇文章写完,不然又得多一个空白月了. 这是之前带领成员开发一个小模块功能的时候 ...
- php 可以编辑treegrid,浅谈EasyUI中编辑treegrid的方法
主从表,从表是一个treegrid,加载完数据后,点击节点进入编辑状态. 复制代码 代码如下: columns : [ [ { title : "ID", field : &quo ...
- php 可以编辑treegrid,浅谈EasyUI中编辑treegrid的方法_jquery
主从表,从表是一个treegrid,加载完数据后,点击节点进入编辑状态. columns : [ [ { title : "ID", field : "id", ...
- float在html语言中的用法,[html5入门-4]浅谈html5中float的用法
html5的文档布局方式一般有流式布局,浮动布局,固定布局和弹性布局等几种方式,本文主要浅谈一下浮动布局在html5中的用法. 一.float定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框 ...
- 关于EasyUI中的Tree
2017年6月21日,天气阴.心情比较沉重. 近期由于毕设的事情,三周不写代码了.这周测试提交了一些BUG,于是开始着手处理,还真的是熟能生巧,三周的功夫就感觉有点生疏.其中有一个BUG就是角色对应的 ...
- 小谈Springcloud中的几个主流熔断器
前言 最近在github里比较火的一个新闻就是trending的弃用:确实作为追求技术价值的组织机构,github弃用毫无价值感的trending,是一件好事,一些劣质的项目长期占用着榜单前列,确实对 ...
- easyui中对tree的checkbox的勾选的改进。子节点勾选的时候，对应的父节点也全部勾选
$(function(){ var roleTreeCheck = true; var isUserCheck = true; $(".custom_check").tree({ ...
- easyui中的tree数据使用说明
参考文档:http://blog.csdn.net/dqsweet/article/details/7276404 参考文档:
- 小谈RTMP中AMF3类型的Command message
由于历史原因我喜欢将这个消息叫做invoke. 1.AMF3类型的Invoke消息的类型是17,而AMF0的Invoke消息的消息类型是20. 2.AMF3类型的Invoke也是使用AMF0进行序列化 ...
最新文章
- ecplise 多工程项目如何进行树形展示
- R多变量正态性检验（Multivariate Normality Tests）
- matplotlib 波士顿房价数据集可视化
- 吴恩达新动作：建立全新机器学习资源Hub，「以数据为中心的AI」大本营
- Python web 开发：部署一个3行代码的wsgi app
- CentOS6 英文系统安装ibus
- Golang mysql数据库
- 自动化Build的方法如下所示
- python恶搞小程序-有趣的python小程序
- Java学习笔记（六）--字符串String类
- c++ regex用法实例
- 0day影响 Chrome和 Safari，谷歌不修复
- Node-Promise
- JavaScript 3D实时线图
- 用什么手机软件可测试无线信道,wifi信道
- 概率论与数理统计期末考试题及答案
- linux桌面小程序开发日记_1（pyqt5 + yolov5）
- c++实现排列与组合
- c语言编程实现scp功能,scp源码浅析
- 湖南师范大学2021年3月25日蓝桥杯热身赛解题报告与标程