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

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

赞 (0)

相关推荐

  • bootstrap-treeview自定义双击事件实现方法

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等.但是不知为什么这个插件没有自带双击事件. 经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解.最后救助大神,问题解决了,但是

  • Bootstrap树形菜单插件TreeView.js使用方法详解

    Bootstrap树形菜单插件TreeView.js使用方法详解

    jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.

  • JS树形菜单组件Bootstrap TreeView使用方法详解

    JS树形菜单组件Bootstrap TreeView使用方法详解

    简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了,结果后来项目又改了需求,菜单的内容和图表都是后台动态生成的,所以只能放弃使用bootstrap插件,自己着手写了一个树形菜单.本文主要分两部分讲,一个是对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单. bootstrap-treeview: 组件介绍:http://

  • 浅析BootStrap Treeview的简单使用

    浅析BootStrap Treeview的简单使用

    bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用. 废话不多说,直接上干干货. 1.bootstrap-treeview Github网址: https://github.com/jonmiles/bootstrap-treeview 2.使用要求: <!-- 样式表 --> <link href="~/Content/bootstrap.css" rel="stylesheet

  • 浅析使用BootStrap TreeView插件实现灵活配置快递模板

    浅析使用BootStrap TreeView插件实现灵活配置快递模板

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 开发条件: 安装bootstrap-treeview插件,具体操作见: bootstrap-treeview 实现功能: 1.一个模板可指定子模板(包含多个地区.价格等) 2.编辑子模板地区时,动态改变tree的地区(其他子模板选中的地区disabled,此模板之前选中的

  • bootstrap插件treeview实现全选父节点下所有子节点和反选功能

    bootstrap插件treeview实现全选父节点下所有子节点和反选功能

    项目需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件.先上图: 选中父节点时,父节点下所有子节点也都全部选中,看代码 1.HTML代码 <h2>TreeView Checkable</h2> <div id="treeview-checkable"></div> 2.Json数据 function getTvStateData() { var defaultData = [ {

  • BootStrap TreeView使用实例详解

    本文实例为大家分享了BootStrap TreeView使用代码,供大家参考,具体内容如下 <html> <head> <title></title> <link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/Scripts/bootstrap/css/bootstrap-treeview

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

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

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

    在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

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

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

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

  • 基于mvc5+ef6+Bootstrap框架实现身份验证和权限管理

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

  • jQuery treeview树形结构应用

    本文实例为大家分享了jQuery treeview树形结构的应用代码,供大家参考,具体内容如下 继Bootstrap-treeview应用后,我又尝试了用jquery-treeview解决这个问题,记录我的解决方案,但是不一定是最优. 引入必备css jquery.treeview.css 引入必备js jquery-3.0.0.js jquery.treeview.js 编写页面treeview_jQuery.html <!DOCTYPE html> <html lang="

  • Bootstrap树形控件使用方法详解

    Bootstrap树形控件使用方法详解

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

  • jQuery树形控件zTree使用小结

    jQuery树形控件zTree使用小结

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

  • 基于Bootstrap仿淘宝分页控件实现代码

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

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

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

    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

  • Android树形控件绘制方法

    Android树形控件绘制方法

    前言 作为一个开发者,日常会接触到很多优秀的软件,其实,或多或少会有这样的想法,我能不能开发一个自己软件,甚至办公软件都希望是Markdown的文本,为何用office?我常常想自己做一个IDE什么的.但是,很多只是想了一下就过了,一直没有实现. 我接触思维导图软件已经很久的了,开始是使用微软的思维导图软件,接着XMind,后来使用了MindMaple Lite.感觉很好用的.也想过如何去实现一个思维导图的软件,加之我特别注意软件的快捷键,我选取软件常常是,看快捷如何,快捷键差的就不要了.基于自

随机推荐