|
|
Posted on
2016-12-13 11:17
WebEnh
阅读( 829)
评论()
编辑
收藏
举报
- 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 >
38 <div >
39 <ul id="tree1"></ul>
40 </div>
41
42 <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);
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 }）；
|
