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

前端之家收集整理的这篇文章主要介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文支持两种方式的数据,一种为List集合,一种为json字符串。

先来介绍一下后台返回list集合(推荐使用此方法):

控制器代码如下:

502_8@ DInfo = new List@H_502_8@(); /// /// TreeView视图 /// /// public ActionResult May(string TypeCode,int parentId) { ViewBag.TypeCode = TypeCode; ViewBag.ParentId = parentId; return View(); } [HttpPost] public ActionResult GetTreeData(string TypeCode,int parentId) { List@H_502_8@ DInfo = dbll.GetModelList("TypeCode="+TypeCode); return Json(GetChildNodes(0,new NodeModel(){},DInfo).nodes); } /// /// GetChildNodes方法,此方法使用递归 /// /// /// public NodeModel GetChildNodes(int parentId,NodeModel childnodestr,List@H_502_8@ DInfo) { List@H_502_8@ 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; }

视图代码如下:

第二种方式为后台返回json字符串这种方式(此方式为后台拼接json字符串传给前台):

不建议大家采用这种方式,比较容易出错。

调用GetChildNodes方法,默认传参试为0(0表示根节点菜单选项) jsonData.Append(GetChildNodes(0)); //闭合Node子类数组 ] jsonData.Append("]"); //返回json字符串 return Json(jsonData.ToString()); } /// /// GetChildNodes方法,此方法使用递归 /// /// /// < returns > public string GetChildNodes(int parentId) { //为DInfo赋值(DInfo承载页面所需的值(间接将值传给页面)),查询所有的数据 List@H_502_8@ DInfo = dbll.GetModelList(""); //创建ChiidNodeStr变量 StringBuilder ChildNodeStr = new StringBuilder(); //查询符合条件的数据(ParentId=0),DictionaryList接收数据 List@H_502_8@ DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) == parentId).ToList(); //循环DictionaryList为TreeView所需数据分层级(即子类、父类等节点分开) for (int i = 0; i < DictionaryList.Count; i++) { //Nodes数组开始 { ChildNodeStr.Append("{"); //实例化NewNode NodeModel NewNode = new NodeModel(); //分别为字段赋值 NewNode.DicId = DictionaryList[i].DicId; NewNode.text = DictionaryList[i].DICName; NewNode.ParentId = DictionaryList[i].ParentId; //将要显示的字段拼接 ChildNodeStr.Append("text:'" + NewNode.text + "',"); //超链接地址(此处设置为空链接#) ChildNodeStr.Append("href:'#parent1',"); ChildNodeStr.Append("tags:['0']"); //拼接完毕子类分层,去掉最后多余的符号(,) string ChildNodes = GetChildNodes(NewNode.DicId).Trim(','); //判断父类下是否有子类,如果有子类放到Nodes里,如果没有不让他显示为数组形式“[]” if (ChildNodes != string.Empty) { //拼接Json字符串格式 ChildNodeStr.Append(","); ChildNodeStr.Append("nodes:["); ChildNodeStr.Append(ChildNodes); ChildNodeStr.Append("]"); } //结尾加上},ChildNodeStr.Append("},"); } //返回Json字符串,并将,去掉 return ChildNodeStr.ToString().Trim(','); }

前台代码和上面基本一致,唯一的差别在于

因为我们后台是拼接的json字符串的缘故,我们需要将json字符串转化为json数组(网上下载的基于Bootstrap的JQuery TreeView树形控件仅仅支持json数组),我也是费了很大的劲才找到的。使用MVC+Bootstrap开发TreeView的同学要注意!!!

下面接着给大家介绍支持json字符串、list集合

以上所述是小编给大家介绍的基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/jquery/46638.html

猜你在找的jQuery相关文章