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. MyCAT ER分片的验证

    在这里,构造了两张表,熟悉Oracle的童鞋都知道,dept(部门表)和emp(员工表),其中dept中的deptno是emp表中dept_no的外键. 两表的建表语句如下: create table ...

  2. Java内存模型深度解析：重排序 --转

    原文地址:http://www.codeceo.com/article/java-memeory-2.html 数据依赖性 如果两个操作访问同一个变量,且这两个操作中有一个为写操作,此时这两个操作之间 ...

  3. Ubuntu下搭建ryu环境

    RYU环境搭建总共四步: step1:首先下载相应的python套件,并且更新pip $ sudo apt-get install python-pip python-dev build-essent ...

  4. 12.Struts2自定义拦截器

    12.自定义拦截器        拦截器是Struts2的一个重要特性.因为Struts2的大多数核心功能都是通过拦截器实现的. 拦截器之所以称之为“拦截器”,是因为它可以拦截Action方法的执行, ...

  5. PHP之验证码的实现

    简单的用PHP实现验证码: ?php /** *制作验证码 *1.启动session *2.设定标头 *3.创建画布 *4.创建颜色 *5.创建随机数并放到画布上 *6.将得到的若干随机数放入sess ...

  6. mybatis入门基础(八)-----查询缓存

    一.什么是查询缓存 mybatis提供查询缓存,用于减轻数据压力,提高数据库性能. mybaits提供一级缓存,和二级缓存. 1.1. 一级缓存是sqlSession级别的缓存.在操作数据库时需要构造 ...

  7. 我的angularjs源码学习之旅1——初识angularjs

    angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...

  8. Java进击C#——语法之知识点的改进

    本章简言 上一章我们讲到关于面向对象思想上C#和JAVA之差别.笔者分别从面向对象的三大特性入手.而本章主要讲一些C#改进的知识点.在.NET Framework 2.0之后出现很多新的知识点.这些知 ...

  9. 你必须知道ASP.NET知识------关于动态注册httpmodule(对不起汤姆大叔)

    一.关于动态注册的问题 很多人看过汤姆大叔的MVC之前的那点事儿系列(6):动态注册HttpModule ,其实汤姆大叔没有发现httpmodule动态注册的根本机制在哪里. 亦即:怎么动态注册?为什 ...

  10. 异步IO比同步阻塞IO性能更好吗?为什么?

    最近在看node.js, 介绍中提到node是异步io的方式实现, 性能比同步阻塞io的更好. 对于一个request而言, 如果我们依赖io的结果, 异步io和同步阻塞io都是要等到io完成才能继续 ...