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


Posted in Javascript onAugust 11, 2016

在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合。

这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了。

控制器代码如下:

//实例化公共静态字典表集合
public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>();
/// <summary>
/// TreeView视图
/// </summary>
/// <returns></returns>
public ActionResult May(string TypeCode)
{
ViewBag.TypeCode = TypeCode;
List<TC_DictionaryInfo> DInfo = dbll.GetModelList("TypeCode=" + TypeCode);
List<NodeModel> list = GetChildNodes(0, new NodeModel() { }, DInfo).nodes;
ViewBag.data = list;
}
///<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;
}

PS:不再是三个方法而简化为两个方法(几乎没什么变动)。

前台代码如下:

var data='@JsonConvert.SerializeObject( ViewBag.data)'.replace(/"/g,'"');
$(function() {
$('#treeview4').treeview({
color: "#428bca",
data: data,
onNodeSelected: function(event, data) {
alert(data);
}
});

PS:这里用到了.NET 下开源的json格式序列号和反序列化的类库

https://www.ibm.com/developerworks/cn/web/wa-lo-json/ ,

下面介绍json序列化和反序列化的两个重要方法:

JsonConvert.SerializeObject(object value)序列化,

它有个重载方法JsonConvert.SerializeObject(object value, params JsonConverter[] converters)。

JsonConvert.DeserializeObject(string value, Type type),反序列化,

它有个重载方法JsonConvert.DeserializeObject(string value, Type type, params JsonConverter[] converters)

这两个方法可以实现基本的序列化和反序列化要求。

js中的replace的作用是将特定的符号替换为自己需要的符号。

而这里replace(/\/g,'"')的作用是把所有的 / 都替换为“(因为页面需要的是json字符串)。

这样的话 我们的页面就可以读取数据进行显示了。BZ还是感觉这种方式更好一点。

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

Javascript 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
QT与javascript交互数据的实现
May 26 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 #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
You might like
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python字符串替换实例分析
2015/05/11 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
使用python接入微信聊天机器人
2020/03/31 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
应聘自荐信
2013/12/14 职场文书
风险评估实施方案
2014/03/09 职场文书
幼儿园小班评语
2014/04/18 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
客服专员岗位职责
2015/02/10 职场文书
培训督导岗位职责
2015/04/10 职场文书
李强感恩观后感
2015/06/17 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Python使用Kubernetes API访问集群
2021/05/30 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL