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/

你可能感兴趣的:(jquery)