09:15 提问
使用jQuery easyUI画出左侧树,点击节点,内容显示在center中的页面代码
点击一个节点，显示相应的数据信息在center中，center中是用datagrid显示的。
按赞数排序
你需要建立tab标签式的布局，点击就新建tab加载不同的datagrid，除非你datagrid数据结构一样，可以获取datagrid后传递链接参数给reload方法重新加载
这个需要在后台实现，前台提供的一些方法也有用，好好看看API
其他相似问题EasyUI中的tree用法介绍
字体：[ ] 类型：转载 时间：
不知不觉10月都结束了，又要到年底了。看看自己上次写过的文章后，已经2个月都没写东西了
真的是太忙了，本应该有好多东西可以写，但是没什么闲时间，每次想到写的时候，来点事就又给忘了。10月最后一天了，在忙也得把这篇文章写完，不然又得多一个空白月了。 　　这是之前带领成员开发一个小模块功能的时候，需要用到弹出窗口加载树状级联单位选择，最后决定用采用jQuery+EasyUI插件进行开发。但是在使用EasyUI中tree的插件时，碰到了不少麻烦。为了提供弹出树的显示速度，就采用异步加载数节点值，首先先加载根节点，然后根据点击的节点展开加载子节点。 　　往往结果和预期的都不一样，困惑了几天，展开后子节点是动态加载了，但是收缩后无法清空之前填充的数据；第二次在展开时，子节点又被重复加载了一遍，造成了数据重复显示，并没有提供清除子节点的方法。想尽了各种办法来解决这个问题，只能换另一种形式加载子节点的值了，把每一个节点值保存起来，判断是否已经存在，存在就不在去加载。 　　两种方法见实例：
代码如下: var treeTitle = '选择列表'; var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1'; var nodeExp= var nodekeep="";
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= 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 = } } }); $("#radCollapse").removeAttr("checked"); }, onLoadError:function(Error) { $.messager.alert('提示', '查询语句出错', 'error'); if(nodeExp==false) { $("#basetree").children().remove(); } }, onLoadSuccess:function(success) { var child=$("#basetree").children(). noinf++; if(child==0&&noinf&1) { $.messager.alert('提示', '数据不存在', 'Info'); } } }); } function treeWindowClose() { $('#treewindow').window('close'); nodekeep=""; nodekeep= } function treeWindowSubmit() { var nodes = $('#basetree').tree('getChecked'); var info = ''; if (nodes.length & 0) { for (var i = 0; i & nodes. i++) { if (info != '') { info += ','; } info += nodes[i]. } //alert(JSON.stringify(nodes)); } else { var node = $('#basetree').tree('getSelected'); if (node != null) { info = node. } } $("#"+rows).val(info); $('#treewindow').window('close'); nodekeep=""; nodeExp= } //全部展开 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 = $('#basetree').tree('append', { parent: node.target, data: datas }); nodekeep+=","+node. } //重新加载 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 S using System.C using System.D using System.L using System.W using System.Web.S using System.Web.Services.P using System.Xml.L using System.Collections.G 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.E string resultStr = string.E string attributes = string.E string colName = string.E string sql = string.E string Casname = string.E bool colt = 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 = while (pt) { for (int i = 0; i & dt.Rows.C 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 = sql = dt.Rows[i]["view_sql"].ToString(); pt = }
} } } } } 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.C i++) { Casname = dt.Rows[i]["view_colname"].ToString(); if (dt.Rows[i]["view_cas"].ToString() == casnName && casnName != colName) { colt = sql = dt.Rows[i]["view_sql"].ToString();
} } } } 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\":\"" + C 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 {
} } } 关键性的代码都已经在上面了，目前也就只能想到这种办法来解决了，有时间的话可以给tree扩展一下，添加一个清除子节点的方法，这样应该实现起来会更容易方便。 　　小弟在此献丑了，不知道各位专家、同仁有没有遇到类似的问题，或者有其它更好的解决办法，欢迎在这交流。 　　同时也感谢各位抽出宝贵的时间阅读文章，让我们共同进步，共同分享交流，在节省他人的时间就是提高自己~~~ 作者：ZHF　　
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery easyui tree
问题描述树前面有一个小三角的图片,节点默认为关闭状态,点击小图片的时候(也就是展开该节点的时候)触发一个事件. 请问该如何做 ?
问题补充：myali88 写道解决方案$('#test').treegrid({
title:'TreeGrid',
iconCls:'icon-save',
width:700,
height:350,
onExpand : function(node){console.log("expand node : " + node);
onCollapse : function(node) {console.log("collapse node : " + node);
}});这样就可以监听节点展开和关闭了。解决方案二：每个节点上都有“点击”和“展开”两个事件，当触发“展开”事件时，tree会请求下面的子节点数据。解决方案三：你看看是不是你点击这个子节点，还会发起请求，而请求回来的数据正好是那整棵树，如果是，那就是你服务器返回数据的问题了。解决方案四：点击的时候，你知不知道触发了什么事件？ onClick ？}