基于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写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
easyui validatebox验证
Apr 29 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 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/04/28 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python中unittest用法实例
2014/09/25 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
python的文件操作方法汇总
2017/11/10 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
Python可以用来做什么
2020/11/23 Python
运动会解说词50字
2014/01/18 职场文书
银行奉献演讲稿
2014/09/16 职场文书
党员思想汇报材料
2014/12/19 职场文书
工作保证书
2015/01/17 职场文书
端午节活动总结报告
2015/02/11 职场文书
专项资金申请报告
2015/05/15 职场文书
电台广播稿范文
2015/08/19 职场文书
《我是什么》教学反思
2016/02/16 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
Python first-order-model实现让照片动起来
2022/06/25 Python