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

在上篇给大家介绍了基于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集合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap
, mvc5
treeview树形控件
mvc5 树形控件、mvc5 ef6 bootstrap、mvc5 bootstrap、mvc5 bootstrap 模板、mvc5 ef6 bootstrap3,以便于您获取更多的相关知识。

时间: 2024-09-20 12:00:48

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

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

本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

基于jQuery的树控件实现代码(asp.net+json)_jquery

语言: asp.net (其实都一样 只要服务器返回json就可以了); 先介绍下: 这个是一个美女大姐问我要的 写好了DEMO准备发给他 总不能独享 就贴出来了 第二次在cnblogs写博.. - - 那个代码有冗余 各位大虾可以自行修改... (失恋了 没心情弄); 压缩包: 里面有3个自己写的插件 1.一个是jQuery 请求webservices的便捷插件 2.一个防ext的mask()加载效果 3.树控件... 关于: /* 本代码只限交流学习使用,勿用于商业用途 系统难免存在bug

JavaScript面向对象技术实现树形控件

javascript|对象|控件 树形控件是一种人们熟悉的用户界面控件,广泛地用来显示层次型数据. 树形控件具有独特的扩展和折叠分支的能力,能够以较小的空间显示出大量的信息,一目了然地传达出数据之间的层次关系.凡是熟悉图形用户界面的用户,都能够自如地运用树形控件. 图一:用JavaScript实现的树形控件 HTML本身不支持树形控件,但我们可以通过一些JavaScript脚本代码实现.为了提高控件的可重用性,我们要充分运用JavaScript对面向对象编程技术的支持.本文的树形控件适用于IE

基于mvc5+ef6+Bootstrap框架实现身份验证和权限管理_C#教程

近和朋友完成了一个大单子架构是mvc5+ef6+Bootstrap,用的是vs2015,数据库是sql server2014.朋友做的架构,项目完成后觉得很多值得我学习,在这里总结下一些心得. 创建项目一开始删掉App_Start目录下的IdentityConfig.cs和Startup.Auth.cs文件;清空Modle文件夹,Controller文件夹和相应的View; 删除目录下的ApplicationInsights.config文件和Startup.cs文件 修改web.config文

Bootstrap树形控件使用方法详解_javascript技巧

一.JQuery树形控件Jquery树形控件是一款基于JQuery+bootstrap.完全通过js和样式手写出来的非常轻量级的控件,网上很多地方都能看到它的影子.它功能简单.用户体验不错.对于一些简单的层级关系展示比较实用,但对于节点的增删改实现起来就不容易了,如果非要做,可能需要自己去封装. 1.一睹初容 全部收起 展开一级 全部展开 2.代码示例 此控件实现起来也非常简单,只需要引用jQuery和bootstrap组件即可. <link href="~/Content/Tree1/c

树形控件TreeView的序列化

treeview|控件 最近自己做了一个小软件,一个文件浏览器,与windows的资源管理器相比,可以查看文件内容,而不用外部程序打开,支持多种文件格式,以后准备加入基于内容的搜索(打算用开源的dotLucene组件).其中需要将树形控件序列化,查了很多资料,在codeproject找到一个vb.net写的,找了一个代码转换器转成了C#,修改了一下,改成了二进制序列化.贴在下面供需要的参考. 原文地址: http://www.codeproject.com/vb/net/TreeViewData

基于Bootstrap仿淘宝分页控件实现代码_javascript技巧

大家都应该上过淘宝的吧,没有上过淘宝的同学估计也没几个了,但是我相信大多数的人都是在淘宝上面买完东西就下线,很少有人会关注淘宝上的设计这类的,但是对于普通人这样还行,但是对于一个程序员这样就可不行了,因为博主本人是从事前端方面的工作,所以就通过仿照淘宝的设计样式,以求在技能上面能够有一个大的突破 一.淘宝分页控件了解 先上一张淘宝的分页图片: 根据上图中对淘宝分页控件的分析,我们大致上可以将淘宝分页控件分成两部分,一部分是核心部分,这一部分主要就是一个分页的核心功能,这个功能同时也是也是不可或缺

jQuery树形控件zTree使用小结_jquery

0 zTree简介  树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.  0.0 zTree的特点 •最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery

基于KO+BootStrap+MVC实现的分页控件代码分享_javascript技巧

JS: /// <reference path="../knockout-3.2.0.js" /> var ViewModel = function (data) { var self = this; self.ObjectList = ko.observableArray(data.ObjectList) self.TotalCount = ko.observable(data.TotalCount); self.PerCount = ko.observable(data