小谈EasyUI中的tree用法

  不知不觉10月且结了,又要到年底了。看看自己上次写了之章后,已经2独月还并未写东西了。真的是绝忙碌了,本应当产生许多事物得以描绘,但是没关系闲时间,每次想到写的时光,来点从即使同时于忘掉了。10月末一龙了,在忙呢得拿当时首文章写了,不然又得多一个空白月了。

  这是事先带成员支付一个略模块功能的时光,需要利用弹出窗口加载树状级联单位挑选,最后决定用利用jQuery+EasyUI插件进行开。但是以以EasyUI中tree的插件时,碰到了过多麻烦。为了供弹出树的显得速度,就利用异步加载数节点值,首先先加载清节点,然后根据点击的节点进行加载子节点。

  往往结果以及预期的且不相同,困惑了几龙,展开后子节点是动态加载了,但是收缩后无法清空之前填充的数码;第二坏当拓展时,子节点又给重复加载了一致所有,造成了数量还显示,并无供清除子节点的方。想一直了各种办法来解决是题材,只能换另外一样栽形式加载子节点的价值了,把各国一个节点值保存起来,判断是否都是,存在即不在去加载。

  两种植艺术展现实例:

图片 1图片 2View 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: datas
124     });
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格式数据:

图片 3图片 4View 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             else
109             {
110                 resultStr = "[]";
111             }
112         }
113         catch (Exception ex)
114         {
115             resultStr = "出错";
116         }
117 
118         context.Response.Write(resultStr);
119     }
120 
121     public bool IsReusable
122     {
123         get
124         {
125             return false;
126         }
127     }
128 }

 

  关键性的代码都曾以点了,目前吗不怕只好想到这种方法来化解了,有工夫的言辞可以于tree扩展一下,添加一个清除子节点的艺术,这样应该实现起来会重易好。

  小弟在这献丑了,不懂得诸位专家、同仁有无出碰到类似之题材,或者发另更好的解决办法,欢迎在即时交流。

  同时也谢谢各位抽出宝贵的年月阅读文章,让我们共同进步,共同享受交流,在节他人之日尽管是增强协调~~~