基于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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
javascript调试说明
Jun 07 Javascript
JS获取时间的方法
Jan 21 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
vue中英文切换实例代码
Jan 21 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
基于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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Request的中断和ErrorHandler实例解析
2018/02/12 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python并行分布式框架Celery详解
2018/10/15 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python读写csv文件的方法
2019/08/13 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
用Python制作音乐海报
2021/01/26 Python
python time.strptime格式化实例详解
2021/02/03 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
坚定理想信念心得体会
2014/03/11 职场文书
珍惜水资源建议书
2014/03/12 职场文书
洗手间标语
2014/06/23 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
react 路由Link配置详解
2021/11/11 Javascript
正则表达式基础与常用验证表达式
2022/06/16 Javascript
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS