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

浏览数：46 / 时间：2015年06月09日

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>

Jquery LigerUI Tree官方示例源代码

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

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         }

C#转换数据位树格式的处理方法

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

        /// <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         });

Juqery LigerUi初始化显示树

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

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 ]

Jquery LigerUI直接构造树的数据格式

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

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 }）；