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 = [];

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

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

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

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>

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

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;

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插件构造树的更多相关文章

8 个最好的 jQuery 树形 Tree 插件
由于其拥有庞大,实用的插件库,使得 jQuery 变得越来越流行.今天将介绍一些最好的 jQuery 树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的 jQuery 插件,它将一个无序 ...
使用jQuery开发tree插件
1.插件截图 2.插件使用首先引入jquery库,然后引入tree.js.tree.css文件,如下: <script type="text/javascript" src ...
实用的两款jquery树形tree插件
这里有两款非常实用的jquery tree控件: (1) ------------------------------------------1.(根据一讲师总结) ---zTree: jquery. ...
CF1003E Tree Constructing 构造+树论
正解:构造解题报告: 传送门! 这题麻油翻译鸭,,,那就先大概港下题意趴QAQ 构造一棵n个点,直径为d,每个点点度不超过k的树这题其实我jio得还是比较简单的趴,,, 首先构造出一条直径,就是一 ...
(转)jQuery LigerUI 插件介绍及使用之ligerTree
一,简介 ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...
java 根据根节点及所有子成员构造树tree
实体类entity package com.ompa.biz.entity; import java.util.ArrayList; import java.util.List; public cla ...
jquery的tree table(树表)
因项目需要,需要在表格中加入tree,使用了jquery的tree table,经美化,完美兼容各种框架的table: 请移步下载tree table 的js文件及css文件等,http://ludo ...
js插件---Bootstrap 树控件
js插件---Bootstrap 树控件一.总结一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...
Jquery之树形插件
1.DynaTree (推荐使用,说明文档以及样例在下载的压缩包里\doc\samples.html) DynaTree 是一个优化的动态jQuery树查看插件,它只在需要时才创建DOM元素.支持ch ...

随机推荐

sql语句查询经纬度范围(转载，源链接失效)
MySQL性能调优 – 使用更为快速的算法进行距离最近遇到了一个问题,通过不断的尝试最终将某句原本占据近1秒的查询优化到了0.01秒,效率提高了100倍. 问题是这样的,有一张存放用户居住地点经纬度 ...
完整部署CentOS7.2+OpenStack+kvm 云平台环境（3）--为虚拟机指定固定ip
之前在测试环境(centos7.2)上部署了openstack云平台(完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建),openstack在neutron组网 ...
Angular动画（ng-class）
ng-class 同触发的是 addClass//当给元素添加一个class时触发, removeClass //把元素的class移除时触发 <ul ng-style="ulWid ...
使用最快速的方式激活windows10专业版
1.安装win10专业版 2.在桌面新建“文本文档.txt” 3.复制如下代码到新新建的“文本文档.txt”中 slmgr /ipk VK7JG-NPHTM-C97JM-9MPGT-3V66T slm ...
java数据库查询类
通用查询数据库辅助类,可实现任意查询语句的查询,还可以进行多结果集查询. 类的代码: package com.hongyuan.db; import java.math.BigDecimal; imp ...
UISlider常见属性
常见属性 self.mySlider.minimumValue = 0.0; // 最小值 self.mySlider.maximumValue = 10; // 最大值 self.mySl ...
PHP实现冒泡算法
<?php //php函数:count($arr)返回array的数值总数. function bubble_sort($arr){ for ($i = 6;$i > 0;$i --){ ...
学习笔记——Java字符串操作常用方法
1.创建字符串最常用的是使用String类的构造方法:String s=new String("abcd"); 也可采用J2SE5.0添加的StringBuilder类的字符串构 ...
leetcode-数组中只出现一次的数字
一.版本1—有序数组中只出现一次的数字 1.题目描述给定一个只包含整数的有序数组,每个元素都会出现两次,唯有一个数只会出现一次,找出这个数. 示例 1: 输入: [1,1,2,3,3,4,4,8,8 ...
python五十六课——正则表达式（常用函数之findall）
4).函数:findall(regex,string,[flags=0]): 参数: 和match.search一样理解功能: 将所有匹配成功的子数据(子串),以列表的形式返回: 如果一个都没有匹配 ...

C#结合Jquery LigerUI Tree插件构造树

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

随机推荐

热门专题