基于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 26 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
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
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP精确计算功能示例
2016/11/29 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
ext jquery 简单比较
2010/04/07 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python实现电子产品商店
2019/02/26 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
复古服装:RetroStage
2019/05/10 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
社团活动总结范文
2014/04/26 职场文书
网站推广策划方案
2014/06/04 职场文书
生物科学专业自荐书
2014/06/20 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
检讨书怎么写
2015/05/07 职场文书
工伤调解协议书
2016/03/21 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers