基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合


Posted in Javascript onAugust 11, 2016

本文支持两种方式的数据,一种为List集合,一种为json字符串。

先来介绍一下后台返回list集合(推荐使用此方法):

控制器代码如下:

public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>();
/// <summary>
/// TreeView视图
/// </summary>
/// <returns></returns>
public ActionResult May(string TypeCode,int parentId)
{
ViewBag.TypeCode = TypeCode;
ViewBag.ParentId = parentId;
return View();
}
[HttpPost]
public ActionResult GetTreeData(string TypeCode,int parentId)
{
List<TC_DictionaryInfo> DInfo = dbll.GetModelList("TypeCode="+TypeCode);
return Json(GetChildNodes(0,new NodeModel(){}, DInfo).nodes);
}
///<summary>
/// GetChildNodes方法,此方法使用递归
/// </summary>
/// <param name="parentId"></param>
/// <returns></returns>
public NodeModel GetChildNodes(int parentId,NodeModel childnodestr,List<TC_DictionaryInfo> DInfo)
{
List<TC_DictionaryInfo> DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) == parentId).ToList();
for (int i = 0; i < DictionaryList.Count; i++)
{
NodeModel NewNode = new NodeModel();
NewNode.DicId = DictionaryList[i].DicId;
NewNode.text = DictionaryList[i].DICName;
NewNode.ParentId = DictionaryList[i].ParentId;
childnodestr.nodes.Add(NewNode);
GetChildNodes(NewNode.DicId, NewNode, DInfo);
}
return childnodestr;
}

视图代码如下:

<script type="text/javascript">
var typecode = @ViewBag.TypeCode;
var parentid = @ViewBag.ParentId;
$(function() {
$.ajax({
type: 'Post',
url: '/Type/GetTreeData',
data:{
TypeCode:typecode,
ParentId:parentid,
},
//data: para,
dataType: 'json',
async: false,
success: function (data) {
var defaultData = eval(data);
//var defaultData = data;
$('#treeview4').treeview({
color: "#428bca",
data: defaultData
});
},
error: function (err) {
alert('不好意思,数据忘记带上了。。。');
}
});
</scipt>

第二种方式为后台返回json字符串这种方式(此方式为后台拼接json字符串传给前台):

不建议大家采用这种方式,比较容易出错。

public ActionResult May(string TypeCode,int parentId)
{
ViewBag.TypeCode = TypeCode;
ViewBag.ParentId = parentId;
return View();
} 
public ActionResult GetTreeData()
{
//创建jsondata对象
StringBuilder jsonData = new StringBuilder();
//拼接json字符串 开始{
jsonData.Append("[");
//调用GetChildNodes方法,默认传参试为0(0表示根节点菜单选项)
jsonData.Append(GetChildNodes(0));
//闭合Node子类数组 ]
jsonData.Append("]");
//返回json字符串
return Json(jsonData.ToString());
}
/// <summary>
/// GetChildNodes方法,此方法使用递归
/// </summary>
/// <param name = "parentId" ></ param >
/// < returns ></ returns >
public string GetChildNodes(int parentId)
{
//为DInfo赋值(DInfo承载页面所需的值(间接将值传给页面)),查询所有的数据
List<TC_DictionaryInfo> DInfo = dbll.GetModelList("");
//创建ChiidNodeStr变量
StringBuilder ChildNodeStr = new StringBuilder();
//查询符合条件的数据(ParentId=0),DictionaryList接收数据
List<TC_DictionaryInfo> DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) == parentId).ToList();
//循环DictionaryList为TreeView所需数据分层级(即子类、父类等节点分开)
for (int i = 0; i < DictionaryList.Count; i++)
{
//Nodes数组开始 {
ChildNodeStr.Append("{");
//实例化NewNode
NodeModel NewNode = new NodeModel();
//分别为字段赋值
NewNode.DicId = DictionaryList[i].DicId;
NewNode.text = DictionaryList[i].DICName;
NewNode.ParentId = DictionaryList[i].ParentId;
//将要显示的字段拼接
ChildNodeStr.Append("text:'" + NewNode.text + "',");
//超链接地址(此处设置为空链接#)
ChildNodeStr.Append("href:'#parent1',");
ChildNodeStr.Append("tags:['0']");
//拼接完毕子类分层,去掉最后多余的符号(,)
string ChildNodes = GetChildNodes(NewNode.DicId).Trim(',');
//判断父类下是否有子类,如果有子类放到Nodes里,如果没有不让他显示为数组形式“[]”
if (ChildNodes != string.Empty)
{
//拼接Json字符串格式
ChildNodeStr.Append(",");
ChildNodeStr.Append("nodes:[");
ChildNodeStr.Append(ChildNodes);
ChildNodeStr.Append("]");
}
//结尾加上}, 
ChildNodeStr.Append("},");
}
//返回Json字符串,并将,去掉
return ChildNodeStr.ToString().Trim(',');
}

前台代码和上面基本一致,唯一的差别在于

var defaultData = eval(data);

因为我们后台是拼接的json字符串的缘故,我们需要将json字符串转化为json数组(网上下载的基于Bootstrap的JQuery TreeView树形控件仅仅支持json数组),我也是费了很大的劲才找到的。使用MVC+Bootstrap开发TreeView的同学要注意!!!

下面接着给大家介绍基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

以上所述是小编给大家介绍的基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 #Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 #Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 #Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 #Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 #Javascript
JavaScript性能优化总结之加载与执行
Aug 11 #Javascript
js接收并转化Java中的数组对象的方法
Aug 11 #Javascript
You might like
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php字符集转换
2017/01/23 PHP
php将html转为图片的实现方法
2017/05/19 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
详解Vue的七种传值方式
2021/02/08 Vue.js
windows 下python+numpy安装实用教程
2017/12/23 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
python小白学习包管理器pip安装
2020/06/09 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
物业管理应届生求职信
2013/10/28 职场文书
新闻专业应届生求职信
2013/10/31 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
银行先进个人总结
2015/02/15 职场文书