C#结合Jquery LigerUI Tree插件构造树

Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单。呵呵 废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法

1、ID/PID格式

JqueryLigerUI官网上的例子是这样的:

C#结合Jquery LigerUI Tree插件构造树
 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>
Jquery LigerUI Tree官方示例源代码

很明显,通过研究其数据格式可以知道以下几点

1、数据类型为Json数据

2、数据格式为{id:"0",pid:"-1",text:"0000"},其中id为节点Id,pid为数据的父节点id,text则为节点显示名称

这样以来,我们就可以将自己的数据格式构造成如上所示的数据格式,下面贴出C#示例代码

C#结合Jquery LigerUI Tree插件构造树
 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         }
C#转换数据位树格式的处理方法

转换完成之后,将数据作为对象返回到前台

C#结合Jquery LigerUI Tree插件构造树
        /// <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的初始化树的方法进行调用,将数据接收并初始化显示树

C#结合Jquery LigerUI Tree插件构造树
 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         });
Juqery LigerUi初始化显示树

大功告成,这样树就可以如愿以偿的显示出来了。

2、Data格式/直接将所需要的格式拼接为树的层级格式

这种方式,Jquery LigerUI官网上并没有具体说明,但在使用url构造树时用到了这种数据格式,经过剖析(过程省略...),其数据格式如下:

C#结合Jquery LigerUI Tree插件构造树
 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 ]
Jquery LigerUI直接构造树的数据格式

知道了数据的格式,那我们要做的就是把自己的数据转换(或者称为封装)成这种格式的数据,那我们就可以实现我们想要的树图了,下面我们就看一下我的实现思路

1、按照格式,拼接树形数据。这里使用递归函数

2、净化树形数据并返回到前台

下面我们看一下C#代码

C#结合Jquery LigerUI Tree插件构造树
 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         }
直接拼接树形数据格式实现方法

调用该函数

C#结合Jquery LigerUI Tree插件构造树
 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#构造的树数据就构造完成了,下面就要接收树数据,构造初始化显示树

C#结合Jquery LigerUI Tree插件构造树
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的官方链接

 演示地址:http://www.ligerui.com/

  api地址:http://api.ligerui.com/

官方论坛: http://bbs.ligerui.com/

下载地址:http://git.oschina.net/ligerui/LigerUI/

C#结合Jquery LigerUI Tree插件构造树

上一篇:php 产生随机字符串


下一篇:有关css伪类visited样式无效的解决方法