基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>

时间:2022-09-06 22:31:47

上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<一>,

其中的两种方式都显得有些冗余。接着上篇博客继续说:

这种方式其实还是利用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(, 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 = ; 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(/&quot;/g,'"');
$(function() { $('#treeview4').treeview({
color: "#428bca",
data: data,
onNodeSelected: function(event, data) {
alert(data);
}
});

PS:这里用到了.NET 下开源的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还是感觉这种方式更好一点。
感谢张老师、方总的指点!
欢迎各位小菜和我一起成长,也欢迎各位大神对本文不足之处提出建议。

基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>的更多相关文章

  1. Web应用程序开发,基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

  2. TreeView树形控件递归绑定数据库里的数据

    TreeView树形控件递归绑定数据库里的数据. 第一种:性能不好 第一步:数据库中查出来的表,字段名分别为UNAME(显示名称),DID(关联数据),UTYPE(类型) 第二步:前台代码 <% ...

  3. SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据(树形导航)的webpart开发及问题

    转:http://blog.csdn.net/miragesky2049/article/details/7204882 SharePoint2010沙盒解决方案基础开发--关于TreeView树形控 ...

  4. 基于vue开发的element-ui树形控件报错问题解决

    对没错,这次又是ElementUI的问题,在使用ElementUI中的 tree 树形控件时需要动态添加DOM元素,但是在使用文档中给出的案例的时候会报错. 案例:ElementUI树形控件 - 自定 ...

  5. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  6. 基于bootstrap的multiple-select下拉控件使用

    multiple-select是一款优秀的下拉菜单控件,能够支持单选和多选. 详细参考文档: JS组件系列——两种bootstrap multiselect组件大比拼 multiple-select ...

  7. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  8. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  9. jQuery树形控件zTree使用小结

    作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...

随机推荐

  1. layer——源码学习

    一.根据源码的学习 发现创建弹窗:使用了一些div来组成 zindex 和 index 是自动生成. zindex 表示生成的层次关系 index 用来表示各个层的id 默认class名 h = [& ...

  2. powershell,系统学习的第一种脚本语言

    最爱的脚本语言之一.

  3. 记录JVM垃圾回收算法

    垃圾回收算法可以分为三类,都基于标记-清除(复制)算法: Serial算法(单线程) 并行算法 并发算法 JVM会根据机器的硬件配置对每个内存代选择适合的回收算法,比如,如果机器多于1个核,会对年轻代 ...

  4. C&sol;C&plus;&plus;指针内存分配小细节

    char *pc = NULL; pc = new char[0]; pc[0] = '1'; 相信初学者看见上面这段代码,都会觉得奇怪,new char[n]中的n指定给指针变量分配多少内存空间,而 ...

  5. C&plus;&plus;11的一些新特性

    3.1.9崭新的Template特性 Variadic Template 可变参数模板 void print() { } template <typename T, typename… Type ...

  6. mongodb持久化

    先上一张图(根据此处重画),看完下面的内容应该可以理解. mongodb使用内存映射的方式来访问和修改数据库文件,内存由操作系统来管理.开启journal的情况,数据文件映射到内存2个view:pri ...

  7. python连接mysql之pymysql模块

    以下demo均以python2中的mysqldb模块 一.插入数据 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import MySQLdb    conn = MyS ...

  8. analytics&period;js

    Analytics.js简介   analytics.js JavaScript代码段是一种可用于衡量用户与您网站的互动情况的全新方式.它与之前的跟踪代码ga.js类似,但为开发者自定义实现方案提供了 ...

  9. Java泛型Restletclient

    写一个与restletserver通信的client类.用于測试通信是否成功.而且进行交互.为了方便其它人使用.于是,写一个通用的方法封装起来,但是中途却放生了一些问题. 依照正常写法,顺序走下来是这 ...

  10. Two Sum IV - Input is a BST

    Given a Binary Search Tree and a target number, return true if there exist two elements in the BST s ...