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

时间:2021-05-25

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

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

控制器代码如下:

public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>();/// <summary>/// TreeView视图/// </summary>/// <returns></returns>public ActionResult May(string TypeCode,int parentId){ViewBag.TypeCode = TypeCode;ViewBag.ParentId = parentId;return View();}[HttpPost]public ActionResult GetTreeData(string TypeCode,int parentId){List<TC_DictionaryInfo> DInfo = dbll.GetModelList("TypeCode="+TypeCode);return Json(GetChildNodes(0,new NodeModel(){}, DInfo).nodes);}///<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;}

视图代码如下:

<script type="text/javascript">var typecode = @ViewBag.TypeCode;var parentid = @ViewBag.ParentId;$(function() {$.ajax({type: 'Post',url: '/Type/GetTreeData',data:{TypeCode:typecode,ParentId:parentid,},//data: para,dataType: 'json',async: false,success: function (data) {var defaultData = eval(data);//var defaultData = data;$('#treeview4').treeview({color: "#428bca",data: defaultData});},error: function (err) {alert('不好意思,数据忘记带上了。。。');}});</scipt>

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

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

public ActionResult May(string TypeCode,int parentId){ViewBag.TypeCode = TypeCode;ViewBag.ParentId = parentId;return View();} public ActionResult GetTreeData(){//创建jsondata对象StringBuilder jsonData = new StringBuilder();//拼接json字符串 开始{jsonData.Append("[");//调用GetChildNodes方法,默认传参试为0(0表示根节点菜单选项)jsonData.Append(GetChildNodes(0));//闭合Node子类数组 ]jsonData.Append("]");//返回json字符串return Json(jsonData.ToString());}/// <summary>/// GetChildNodes方法,此方法使用递归/// </summary>/// <param name = "parentId" ></ param >/// < returns ></ returns >public string GetChildNodes(int parentId){//为DInfo赋值(DInfo承载页面所需的值(间接将值传给页面)),查询所有的数据List<TC_DictionaryInfo> DInfo = dbll.GetModelList("");//创建ChiidNodeStr变量StringBuilder ChildNodeStr = new StringBuilder();//查询符合条件的数据(ParentId=0),DictionaryList接收数据List<TC_DictionaryInfo> DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) == parentId).ToList();//循环DictionaryList为TreeView所需数据分层级(即子类、父类等节点分开)for (int i = 0; i < DictionaryList.Count; i++){//Nodes数组开始 {ChildNodeStr.Append("{");//实例化NewNodeNodeModel 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(',');}

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

var defaultData = eval(data);

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

下面接着给大家介绍基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

以上所述是小编给大家介绍的基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章