C#结合Jquery LigerUI Tree插件构造树
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 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#示例代码
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#转换数据位树格式的处理方法
转换完成之后，将数据作为对象返回到前台
/// <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 });Juqery LigerUi初始化显示树
大功告成，这样树就可以如愿以偿的显示出来了。
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 ]Jquery LigerUI直接构造树的数据格式
知道了数据的格式，那我们要做的就是把自己的数据转换(或者称为封装)成这种格式的数据，那我们就可以实现我们想要的树图了，下面我们就看一下我的实现思路
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 }）；直接构造树数据 --- 初始化显示树
OK，使用这种方式构造树完成。
下面贴上Juqery LigerUI的官方链接
演示地址:http://www.ligerui.com/
api地址:http://api.ligerui.com/
官方论坛: http://bbs.ligerui.com/
下载地址:http://git.oschina.net/ligerui/LigerUI/
转载于:https://www.cnblogs.com/AlphaThink-AT003/p/3564236.html
C#结合Jquery LigerUI Tree插件构造树相关推荐
- 8 个最好的 jQuery 树形 Tree 插件
由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行.今天将介绍一些最好的jQuery树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的jQuery插件,它将一个无序列表转换为可 ...
- html树插件,推荐8款jQuery轻量级树形Tree插件
由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行.今天将介绍一些最好的jQuery树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的jQuery插件,它将一个无序列表转换为可 ...
- jQuery LigerUI 插件介绍及使用之ligerTree
一,简介 ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...
- zTree 一个依靠 jQuery 实现的多功能 “树插件”
http://www.ztree.me/v3/demo.php#_101 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 ...
- easyui treegrid php,jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 | 菜鸟教程
jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格 jQuery EasyUI 插件 扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid. ...
- Device Tree Overlays：”插件“设备树
Device Tree Overlays:"插件"设备树 传统设备树 批量管理硬件资源,机制僵化 "插件"设备树 模块化管理硬件资源,灵活定制 使用前提 内核配 ...
- 114 Device Tree Overlays：”插件“设备树
传统设备树 批量管理硬件资源,机制僵化 "插件"设备树 模块化管理硬件资源,灵活定制 使用前提 内核配置 CONFIG_OF_OVERLAY = y CONFIG_OF_CONFI ...
- jQuery LigerUI 使用教程表格篇(1)
阅读目录 第一个例子 数据结构 两种绑定数据的方式 配置column 自定义表头 自定义单元格 排序与分页 事件与方法 第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以 ...
- jQuery LigerUI 使用教程入门篇
jQuery LigerUI 使用教程入门篇 阅读目录 获取最新代码 ligerUI是什么 如何使用 如何扩展 获取最新代码 可以到http://ligerui.googlecode.com下载最新代 ...
最新文章
- P1083 借教室（标记永久化线段树/二分+前缀和）难度⭐⭐⭐★
- ProxyStrike运行bug解决办法
- 《数据库SQL实战》从titles表获取按照title进行分组
- 服务器虚拟化分为半,服务器虚拟化有哪些？
- win7 远程桌面 复制粘贴
- php 错误提示模板,php 关闭错误提示方法总结与性能分析
- 开奖及送书|《Vue.js权威指南》
- 开课吧Java课堂：小应用程序基础是什么
- 重装系统——Win10系统U盘启动盘制作教程（MSDN自带纯净版）
- word 插入公式技巧
- PS使模糊图片变清晰
- 用python解决放苹果问题_[18/11/24] 递归解决-放置苹果问题
- 收发器（Transceiver）架构1——接收机1
- 【.NET】IQueryable扩展方法实现复杂查询条件
- vue组件中校验身份证号，手机号和邮箱
- 封装一个自己的golang操作MySQL数据库工具
- 关于PolarCode方案被5G标准采纳这件事
- 【x86架构】SMM
- 雅虎通推出 PingMe 服务，酷!
- 图的遍历（深度优先遍历DFS，广度优先遍历BFS）以及Ｃ语言的实现
热门文章
- 复练-面试的科技树-我是谁、我喜欢、我能够
- python3迭代器和可迭代对象,Python3学习(8)--迭代，可迭代的和迭代器
- 主板没有rgb接口怎么接灯_老电脑也玩一下RGB，一次酷冷至尊MB400L智瞳机箱安装体验...
- wireshark使用_使用 Wireshark 抓取数据包
- FTP安装及用户及权限配置
- ajax 获取openid,纯前端获取当前用户的openid（微信小程序）
- android intent enum,enum类型被intent所携带时需要注意的地方
- 2017下半年网络规划设计师考试上午真题
- 给你的网站添加3D地球显示的访客统计(使用RevolverMaps)
- scrapy 图片url 转base64_一文快速掌握 scrapy 爬虫框架