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. Objective-C中的Block回调模式

    在前面的博客中提到了Block的概念和使用方法,个人感觉Block最爽的用法莫过于在回调时用block.感觉比委托回调和目标方法回调用着要顺手,好不好用还得读者亲自用一下才知道.如果 读者之前用过SS ...

  2. Cookie/Session机制详解

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  3. 初试JqueryEasyUI（附Demo）

    写在前面 准备 布局Layout 菜单树Tree 内容页Tabs 右键菜单Menu 表单Form 对话框Dialog 示例Demo下载 关于easyui不多说,对于我们这样没有美术功底的程序员来说,简 ...

  4. geotrellis使用（八）矢量数据栅格化

    目录 前言 栅格化处理 总结 参考链接 一.前言        首先前几天学习了一下Markdown,今天将博客园的编辑器改为Markdown,从编写博客到界面美观明显都清爽多了,也能写出各种样式的东 ...

  5. ASP.NET的session操作方法总结

    在开发ASP.NET程序时,需要对相关数据进行缓存,缓存较多的主要是用户的身份信息,现提供几个对session操作较为常用的方法: 1.添加session,对设置对应的时间: /// <summ ...

  6. Node.js、Express框架获取客户端IP地址

    Node.js //传入请求HttpRequest function getClientIp(req) { return req.headers['x-forwarded-for'] || req.c ...

  7. 你真的会玩SQL吗？删除重复数据且只保留一条

    在网上看过一些解决方法 我在此给出的方法适用于无唯一ID的情形 表:TB_MACVideoAndPicture 字段只有2个:mac,content mac作为ID,正常情况下mac数据是唯一的,由于 ...

  8. SIFT特征详解

    1.SIFT概述 SIFT的全称是Scale Invariant Feature Transform,尺度不变特征变换,由加拿大教授David G.Lowe提出的.SIFT特征对旋转.尺度缩放.亮度变 ...

  9. gradle学习笔记

    一直想着花时间学习下gradle,今天有空.入门一下.参考:极客学院gradle使用指南,官方文档:gradle-2.12/docs/userguide/installation.html,以及百度阅 ...

  10. CodeFirst时使用T4模板（你肯定没用过的笨方法，还望园友指教）

    我们都知道T4模板用于生成相似代码. 在DBFirst和ModelFirst条件下我们很容易从.edmx下获取所有实体类和其名称,并且通过我们定义的模板和某些遍历工作为我们生成所需要的相似代码. 但是 ...