基于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 中的 call 和 apply使用介绍
Feb 22 Javascript
JS定时器实例详细分析
Oct 11 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
基于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
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Python实现的下载网页源码功能示例
2017/06/13 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
PyQt5实现简易电子词典
2019/06/25 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python生成requirements.txt的两种方法
2019/09/18 Python
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
电子商务个人职业生涯规划范文
2014/02/12 职场文书
广告设计应届生求职信
2014/03/01 职场文书
幼儿园家长寄语
2014/04/02 职场文书
大学开学计划书
2014/04/30 职场文书
企业文化标语口号
2014/06/09 职场文书
班级团队活动方案
2014/08/14 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
python实现过滤敏感词
2021/05/08 Python
html粘性页脚的具体使用
2022/01/18 HTML / CSS