基于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 相关文章推荐
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
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支持断点续传的源码
2010/05/16 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
php适配器模式简单应用示例
2019/10/23 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python获取外网ip地址的方法总结
2015/07/02 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
django 取消csrf限制的实例
2020/03/13 Python
python 等差数列末项计算方式
2020/05/03 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
Android笔试题总结
2014/11/29 面试题
教师自荐信
2013/12/10 职场文书
给分销商的致歉信
2014/01/14 职场文书
简历里的自我评价
2014/01/31 职场文书
大家检讨书5000字
2014/02/03 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
医德医风演讲稿
2014/05/20 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
高中化学教学反思
2016/02/22 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis