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. ZOJ Problem Set - 1331 Perfect Cubes 判断一个double是否为整数

    zju对时间要求比较高,这就要求我们不能简单地暴力求解(三个循环搞定),就要换个思路:因为在循环时,已知a,确定b,c,d,在外重两层循环中已经给定了b和c,我们就不用遍历d,我们可以利用d^3=a^ ...

  2. 在线预览Office文件【效果类似百度文库】

    引言 结合上个项目和目前做的这个项目,其中都用到了Office文件在线预览,目前项目中是用到公司购买的Ntko控件,该控件每次浏览文件时则会提示安装信任插件,很繁琐,而且浏览效果不好. 提到Offic ...

  3. android防止内存溢出浅析

    Android的虚拟机是基于寄存器的Dalvik,它的最大堆大小一般是16M.但是Android采用的是Java语言编写,所以在很大程度上,Android的内存机制等同于Java的内存机制,在刚开始开 ...

  4. 基于OpenSLL的RSA加密应用(非算法)

    基于OpenSLL的RSA加密应用(非算法) iOS开发中的小伙伴应该是经常用der和p12进行加密解密,而且在通常加密不止一种加密算法,还可以加点儿盐吧~本文章主要阐述的是在iOS中基于openSL ...

  5. 7.2 数据注解属性--TimeStamp特性【Code-First 系列】

    TimeStamp特性可以应用到领域类中,只有一个字节数组的属性上面,这个特性,给列设定的是tiemStamp类型.在并发的检查中,Code-First会自动使用这个TimeStamp类型的字段. 下 ...

  6. 鼠标移到导航上面 当前的LI变色 处于当前的位置

    鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航. 点击这里查看效果 以下是源代码: <html> <head> <meta http-equiv=& ...

  7. 神奇的CSS3按钮特效

    点击这里查看效果 以下是源代码: <!doctype html> <html> <!-- author: @simurai --> <head> < ...

  8. Dom4j操作XML文件

    1. 创建并写入XML public static void writeXML(String filename){ try { Document document = DocumentHelper.c ...

  9. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  10. Java04

      0.面向对象(Object Oriented:OO):     0.OOA(面向对象分析) OOD(面向对象的设计) OOP(面向对象编程)     1.是软件开发方法     2.扩展的领域:数 ...