EasyUI Tree 树 ——实现多级别菜单的展示,以及与后台数据的交互
Posted 天下!行
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUI Tree 树 ——实现多级别菜单的展示,以及与后台数据的交互相关的知识,希望对你有一定的参考价值。
一 要引入的js css库
<link type="text/css" href="css/base.css" rel="stylesheet" /> <link type="text/css" href="jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" /> <link type="text/css" href="jquery-easyui-1.4/themes/icon.css" rel="stylesheet" /> <link type="text/css" href="css/icon.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-easyui-1.4/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.4/jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="Scripts/json2.js"></script> <%--<script type="text/javascript" src="jquery-easyui-1.4/extension/jquery-easyui-datagridview/datagrid-detailview.js"></script>--%> <script type="text/javascript" src="Scripts/parseurl.js"></script>
二 写DIV用来存放菜单树,代码如下
<div region="center" border="false" data-options="title:\'系统导航\',collapsible:true"> tree的标题、位置,等属性
<div id="menuTree"></div> 通过js获取后台json数据,展现出来
</div>
三 写 js代码,与后台进行交互
$(function () { //在页面加载完毕后会执行该方法,个人理解$(function(){});好比就是java c#中的main()方法,是程序的入口 LoadMenuTree(); }); function LoadMenuTree() { $(\'#orgTree\').tree({ url: \'ashx/NewMenu.ashx?cmd=GetMENUTrees\',//根据链接获取后台方法 onSelect: function (node) {//选中某个节点,会调用该事件 if (node.link != "") getAspxFromMenuUrl(node.link)//根据传来的节点属性link进行页面的跳转 }, onLoadSuccess: function () {//成功加载树后会调用该事件 var rootNode = $("#orgTree").tree(\'getRoot\'); $("#orgTree").tree("select", rootNode.target); }, }) }
四 对后台代码的调用
1找到后台方法
NewMenu.ashx 页面内的内容
url: \'ashx/NewMenu.ashx?cmd=GetMENUTrees\', 通过该链接既可找到 NewMenu类中的 GetMENUTrees方法
2 后台方法的实现
GetMENUTrees方法
#region 获取菜单树 public string GetMENUTrees(HttpContext context) { try { DataTable _menuOption = 从数据库中获取菜单的信息(下面将会介绍数据库的设计,以及如何从数据库中获取菜单数据) if (_menuOption.Rows.Count > 0) { List<EasyUITreeNode> list = GetTreeNode(_menuOption); //将菜单数据转换为带有递归关系的集合(即上下级关系) return ObjToJson(list); //将集合转换为json数据,最后返回前台 } else { return " "; } } catch (Exception e) { throw e; } }
两个bean类
public class EasyUITreeNode { public string pkid { set; get; }//主键 public string id { set; get; }//菜单ID public string text { set; get; }//菜单名称 public string level { set; get; } public string iconCls { set; get; } public string state { set; get; }//节点是否展开 public string link { set; get; }//链接 public string iscontainer { set; get; }//是否为容器 public string visible { set; get; }//是否可见 public string parentid { set; get; }//上级 public string image { set; get; } public bool Checked { set; get; } public string haspermission { set; get; } public List<EasyUITreeNode> children { set; get; } } public partial class SYS_MENUANDMEMBER { public int id { set; get; } public int orderid { set; get; } public string iconCls { set; get; } public int levels { set; get; } public string name { set; get; } public string link { set; get; } public int parent{ set; get; } public string iscontainer { set; get; }//是否为容器 public string visible { set; get; }//是否可见 public string image { set; get; } public string imgchange { set; get;} public string javascript { set; get; } }
将 DataTable _menuOption 转换为带有递归关系的List<EasyUITreeNode> 集合
//获取根节点 public List<EasyUITreeNode> GetTreeNode(DataTable _menuOtion) { DatatableToList<SYS_MENUANDMEMBER> list = new DatatableToList<SYS_MENUANDMEMBER>(); menuList = list.ConvertTolist(_menuOtion);//将 DataTable数据转换为list List<SYS_MENUANDMEMBER> menulistNode = menuList.Where(m => m.parent == 0).ToList() 获取菜单的跟菜单,祖先菜单 List<EasyUITreeNode> treeList = new List<EasyUITreeNode>(); if (menulistNode.Count < 1)//为空,返回空值 { return null; } else //不为空 则将 menulistNode 转换为 EasyUITreeNode { for (int i = 0; i < menulistNode.Count; i++) { EasyUITreeNode tree = new EasyUITreeNode(); tree.id = menulistNode[i].id.ToString(); tree.text = menulistNode[i].name; tree.level = menulistNode[i].levels.ToString(); tree.link = menulistNode[i].link; tree.parentid = menulistNode[i].parent.ToString(); tree.iscontainer = menulistNode[i].iscontainer; tree.visible = menulistNode[i].visible; //tree.iconCls = "panel-tool-collapse"; tree.iconCls = menulistNode[i].imgchange; tree.state = "closed"; tree.children = GetTreeChildren(menulistNode[i].id);将根菜单的id作为其下级菜单的parentid,获取其下属的菜单 treeList.Add(tree); } return treeList; } } //获取子节点 private List<EasyUITreeNode> GetTreeChildren(Int32 p) 方法原理同其上次菜单获取的原理相同 { List<SYS_MENUANDMEMBER> menulistChildred = menuList.Where(m => m.parent.Equals(p)).ToList(); List<EasyUITreeNode> treeList = new List<EasyUITreeNode>(); if (menulistChildred.Count < 1) { return null; } else { for (int i = 0; i < menulistChildred.Count; i++) { EasyUITreeNode tree = new EasyUITreeNode(); tree.id = menulistChildred[i].id.ToString(); tree.text = menulistChildred[i].name; tree.level = menulistChildred[i].levels.ToString(); tree.link = menulistChildred[i].link; tree.parentid = menulistChildred[i].parent.ToString(); tree.iscontainer = menulistChildred[i].iscontainer; tree.visible = menulistChildred[i].visible; //tree.iconCls = menulistChildred[i].image; tree.iconCls = menulistChildred[i].imgchange; //tree.state = "closed"; tree.children = GetTreeChildren(menulistChildred[i].id);//一步步递归,最后将会得到一个具有层层递归关系的集合 treeList.Add(tree); } return treeList; } }
#region Datatable转List public class DatatableToList<T> where T : new() { public List<T> ConvertTolist(DataTable dt) { List<T> ts = new List<T>(); Type type = typeof(T); string tempName = ""; foreach (DataRow dr in dt.Rows) { T t = new T(); PropertyInfo[] propertys = t.GetType().GetProperties(); foreach (PropertyInfo pi in propertys) { tempName = pi.Name; if (dt.Columns.Contains(tempName)) { if (!pi.CanWrite) continue; object value = dr[tempName]; if (value != DBNull.Value) pi.SetValue(t, value, null); } } ts.Add(t); } return ts; } } #endregion
//将返回值转换为json public static string ObjToJson<T>(T data) { return JsonConvert.SerializeObject(data); }
五 数据库部分 后续更新....
关于数据库的设计可以参考我的另一篇随笔 mvc+easyui,写个树
以上是关于EasyUI Tree 树 ——实现多级别菜单的展示,以及与后台数据的交互的主要内容,如果未能解决你的问题,请参考以下文章
用easyui tree从后台传data,遇到树结构层级比较多的怎么办?