- Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单。呵呵 废话不说了，直入正题，下面介绍C#结合ligerui 构造树形菜单的两种方法
1、ID/PID格式JqueryLigerUI官网上的例子是这样的：复制代码1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml">3 <head>4 <title></title>5 <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>6 <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />7 <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>8 <script src="../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>9 <script type="text/javascript">10 $(function ()11 {12 var data = [];1314 data.push({ id: 1, pid: 0, text: '1' });15 data.push({ id: 2, pid: 1, text: '1.1' });16 data.push({ id: 4, pid: 2, text: '1.1.2' });17 data.push({ id: 5, pid: 2, text: '1.1.2' });1819 data.push({ id: 10, pid: 8, text: 'wefwfwfe' });20 data.push({ id: 11, pid: 8, text: 'wgegwgwg' });21 data.push({ id: 12, pid: 8, text: 'gwegwg' });2223 data.push({ id: 6, pid: 2, text: '1.1.3', ischecked: true });24 data.push({ id: 7, pid: 2, text: '1.1.4' });25 data.push({ id: 8, pid: 7, text: '1.1.5' });26 data.push({ id: 9, pid: 7, text: '1.1.6' });2728 $("#tree1").ligerTree({29 data:data,30 idFieldName :'id',31 parentIDFieldName :'pid'32 }33 );34 });35 </script>36 </head>37 <body >38 <div >39 <ul id="tree1"></ul>40 </div>4142 <div >43 <!-- 数据统计代码 -->44 </div>45 </body>46 </html>复制代码很明显，通过研究其数据格式可以知道以下几点1、数据类型为Json数据2、数据格式为{id:"0",pid:"-1",text:"0000"},其中id为节点Id,pid为数据的父节点id,text则为节点显示名称这样以来，我们就可以将自己的数据格式构造成如上所示的数据格式，下面贴出C#示例代码复制代码1 /// <summary>2 /// 获取节点数据集合3 /// </summary>4 /// <param name="organList">节点元数据，从数据库获得</param>5 /// <returns>返回节点数据集合</returns>6 public object GetNodeTreeData(IEnumerable<OrganDto> organList) {7 StringBuilder jsonString = new StringBuilder();8 //开始构造树格式9 jsonString.Append("[");10 //指定Id,PId创建树11 foreach (var item in organList) {12 jsonString.Append("{id:\"" + item.ID + "\",pid:\"" + item.ParentID + "\",text:\"" + item.X + "(" + item.Xdm + ")\"},");13 }14 //删除字符串最后一个,15 jsonString = jsonString.Remove(jsonString.Length - 1, 1);16 //树格式构造完成17 jsonString.Append("]");18 return jsonString;19 }复制代码转换完成之后，将数据作为对象返回到前台复制代码/// <summary>/// 初始化树/// </summary>/// <param name="year">当前选中年份</param>/// <returns>返回树节点数据</returns>public string InitTree(int? year) {List<int> organYearList = GetOrganYear();if (year == null || year == 0) {//获取默认年份year = organYearList[0];}//获取组织机构信息IEnumerable<OrganDto> organList = this.db.Organs.Where(p => p.AGraduateYear == year || p.AGraduateYear == 0).ToList().Select(p => CovertEntityToDto(p));object obj = GetNodeTreeData(organList);return obj.ToString();}复制代码这样后台处理完成，前台就按照Jquery LigerUi的初始化树的方法进行调用，将数据接收并初始化显示树复制代码1 $.ajax({2 type: 'get',3 url: '/Tree/InitTree?year=' + year,4 success: function (data) {5 //...问题 JSON.parse: expected property name or '}'6 //var json = $.parseJSON(data);78 $("#tree3").ligerTree({9 checkbox: false,10 parentIcon: null,11 childIcon: null,12 nodeWidth: 230,13 data: eval("(" + data + ")"), // 数据格式转换为Json,也可使用$.parseJSON函数14 idFieldName :'id',15 parentIDFieldName :'pid',16 onSelect: function (node) {17 var date = new Date();18 var getRightPartOfStr = node.data.text.split('(');19 //获取系代码20 var xdm = $.trim(getRightPartOfStr[1].split(')')[0]);21 document.getElementById('getData').value = xdm;22 //获取时间23 var getYear = $('#changeYear').find('option:selected').attr('value');24 $.getJSON('/Tree/GetTreeNodeData', { 'Xdm': xdm, 'Year': getYear, 'tsm': date.getMilliseconds() }, function (para) {25 $.each(para, function (i, v) {26 document.getElementById('ID').value = v.ID;27 document.getElementById('Xdm').value = v.Xdm;28 document.getElementById('X').value = v.X;2930 //--- 不能用$，具体原因不详 ---31 document.getElementById("Xqc").value = v.Xqc;32 document.getElementById("Ywm").value = v.Ywm;33 document.getElementById("AGraduateYear").value = v.AGraduateYear;34 document.getElementById("ParentID").value = v.ParentID;35 });36 });37 }38 });39 }40 });复制代码大功告成，这样树就可以如愿以偿的显示出来了。2、Data格式/直接将所需要的格式拼接为树的层级格式这种方式，Jquery LigerUI官网上并没有具体说明，但在使用url构造树时用到了这种数据格式，经过剖析(过程省略...)，其数据格式如下：复制代码1 [2 { text: '节点1', children: [3 { text: '节点1.1' },4 { text: '节点1.2' },5 { text: '节点1.3', children: [6 { text: '节点1.3.1' ,children: [7 { text: '节点1.3.1.1' },8 { text: '节点1.3.1.2' }]9 },10 { text: '节点1.3.2' }11 ]12 },13 { text: '节点1.4' }14 ]15 },16 { text: '节点2' },17 { text: '节点3' },18 { text: '节点4' }19 ]复制代码知道了数据的格式，那我们要做的就是把自己的数据转换(或者称为封装)成这种格式的数据，那我们就可以实现我们想要的树图了，下面我们就看一下我的实现思路1、按照格式，拼接树形数据。这里使用递归函数2、净化树形数据并返回到前台下面我们看一下C#代码复制代码1 /// <summary>2 /// 递归创建树3 /// </summary>4 /// <param name="item"></param>5 /// <param name="jsonString"></param> 6 /// <param name="organList"></param> 7 void Test(OrganDto item, StringBuilder jsonString, IEnumerable<OrganDto> organList) { 8 //判断是否有下级节点,如果有子节点，输出子节点 9 bool isLeaf = IsLeaf(item.ID);10 //添加根节点11 jsonString.Append("{text:\"" + item.X + "(" + item.Xdm + ")\"");12 var n = organList.Where(p => p.ParentID == item.ID).Count();13 int temJ = 0;14 if (isLeaf) {15 jsonString.Append(",children:[");16 //...输出子节点 17 foreach (var child in organList.Where(p => p.ParentID == item.ID)) {18 temJ++;19 Test(child, jsonString, organList);20 }21 jsonString.Append("]},");22 23 }24 else {25 jsonString.Append("},");26 }27 }复制代码调用该函数 复制代码 1 /// <summary> 2 /// 获取节点数据集合 3 /// </summary> 4 /// <param name="organList">节点元数据，从数据库获得</param> 5 /// <returns>返回节点数据集合</returns> 6 public object GetNodeTreeData(IEnumerable<OrganDto> organList) { 7 StringBuilder jsonString = new StringBuilder(); 8 //开始构造树格式 9 jsonString.Append("["); 10 11 foreach (var item in organList) {12 if (item.ParentID == -1) {13 Test(item, jsonString, organList);14 }15 }16 jsonString.Append("]");17 //....删除多余','号18 string[] test = jsonString.ToString().Split(']');19 jsonString.Clear();20 foreach (var item in test) {21 if (item != "") {22 jsonString.Append(item.Remove(item.Length - 1, 1) + "]");23 }24 }25 26 return jsonString;27 }复制代码这样以来，我们的C#构造的树数据就构造完成了，下面就要接收树数据，构造初始化显示树 复制代码1 $("#tree3").ligerTree({2 checkbox: false,3 parentIcon: null,4 childIcon: null,5 nodeWidth: 230,6 data: eval("(" + data + ")") // 数据格式转换为Json,也可使用$.parseJSON函数7 }）；