基于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 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 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
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python通过format函数格式化显示值
2020/10/17 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
《荷花》教学反思
2014/04/16 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
文明班集体申报材料
2014/05/23 职场文书
学校施工安全责任书
2015/01/29 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
土建技术员岗位职责
2015/04/11 职场文书
python xlwt模块的使用解析
2021/04/13 Python