C#结合Jquery LigerUI Tree插件构造树
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 = []; 13 14 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' }); 18 19 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' }); 22 23 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' }); 27 28 $("#tree1").ligerTree({ 29 data:data, 30 idFieldName :'id', 31 parentIDFieldName :'pid' 32 } 33 ); 34 }); 35 </script> 36 </head> 37 <body style="padding:10px"> 38 <div style="width:200px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto; "> 39 <ul id="tree1"></ul> 40 </div> 41 42 <div style="display:none"> 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); 7 8 $("#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; 29 30 //--- 不能用$，具体原因不详 --- 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 }）；
OK，使用这种方式构造树完成。
下面贴上Juqery LigerUI的官方链接
api地址:http://api.ligerui.com/
官方论坛: http://bbs.ligerui.com/
