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

C#结合Jquery LigerUI Tree插件构造树的更多相关文章

  1. 8 个最好的 jQuery 树形 Tree 插件

    由于其拥有庞大,实用的插件库,使得 jQuery 变得越来越流行.今天将介绍一些最好的 jQuery 树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的 jQuery 插件,它将一个无序 ...

  2. 使用jQuery开发tree插件

    1.插件截图 2.插件使用 首先引入jquery库,然后引入tree.js.tree.css文件,如下: <script type="text/javascript" src ...

  3. 实用的两款jquery树形tree插件

    这里有两款非常实用的jquery tree控件: (1) ------------------------------------------1.(根据一讲师总结) ---zTree: jquery. ...

  4. CF1003E Tree Constructing 构造+树论

    正解:构造 解题报告: 传送门! 这题麻油翻译鸭,,,那就先大概港下题意趴QAQ 构造一棵n个点,直径为d,每个点点度不超过k的树 这题其实我jio得还是比较简单的趴,,, 首先构造出一条直径,就是一 ...

  5. (转)jQuery LigerUI 插件介绍及使用之ligerTree

    一,简介  ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...

  6. java 根据 根节点及所有子成员 构造树tree

    实体类entity package com.ompa.biz.entity; import java.util.ArrayList; import java.util.List; public cla ...

  7. jquery的tree table(树表)

    因项目需要,需要在表格中加入tree,使用了jquery的tree table,经美化,完美兼容各种框架的table: 请移步下载tree table 的js文件及css文件等,http://ludo ...

  8. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  9. Jquery之树形插件

    1.DynaTree (推荐使用,说明文档以及样例在下载的压缩包里\doc\samples.html) DynaTree 是一个优化的动态jQuery树查看插件,它只在需要时才创建DOM元素.支持ch ...

随机推荐

  1. sql语句查询经纬度范围(转载,源链接失效)

    MySQL性能调优 – 使用更为快速的算法进行距离 最近遇到了一个问题,通过不断的尝试最终将某句原本占据近1秒的查询优化到了0.01秒,效率提高了100倍. 问题是这样的,有一张存放用户居住地点经纬度 ...

  2. 完整部署CentOS7.2+OpenStack+kvm 云平台环境(3)--为虚拟机指定固定ip

    之前在测试环境(centos7.2)上部署了openstack云平台(完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建),openstack在neutron组网 ...

  3. Angular动画(ng-class)

    ng-class 同 触发的是 addClass//当给元素添加一个class时触发, removeClass //把元素的class移除时触发 <ul ng-style="ulWid ...

  4. 使用最快速的方式激活windows10专业版

    1.安装win10专业版 2.在桌面新建“文本文档.txt” 3.复制如下代码到新新建的“文本文档.txt”中 slmgr /ipk VK7JG-NPHTM-C97JM-9MPGT-3V66T slm ...

  5. java数据库查询类

    通用查询数据库辅助类,可实现任意查询语句的查询,还可以进行多结果集查询. 类的代码: package com.hongyuan.db; import java.math.BigDecimal; imp ...

  6. UISlider常见属性

    常见属性 self.mySlider.minimumValue = 0.0;   // 最小值 self.mySlider.maximumValue = 10;    // 最大值 self.mySl ...

  7. PHP实现冒泡算法

    <?php //php函数:count($arr)返回array的数值总数. function bubble_sort($arr){ for ($i = 6;$i > 0;$i --){ ...

  8. 学习笔记——Java字符串操作常用方法

    1.创建字符串 最常用的是使用String类的构造方法:String s=new String("abcd"); 也可采用J2SE5.0添加的StringBuilder类的字符串构 ...

  9. leetcode-数组中只出现一次的数字

    一.版本1—有序数组中只出现一次的数字 1.题目描述 给定一个只包含整数的有序数组,每个元素都会出现两次,唯有一个数只会出现一次,找出这个数. 示例 1: 输入: [1,1,2,3,3,4,4,8,8 ...

  10. python五十六课——正则表达式(常用函数之findall)

    4).函数:findall(regex,string,[flags=0]): 参数: 和match.search一样理解 功能: 将所有匹配成功的子数据(子串),以列表的形式返回: 如果一个都没有匹配 ...