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

2019-11-20 09:15:32

字體：大中小

來源：轉載

供稿：網友

本文支持兩種方式的數據，一種為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(',');}

前臺代碼和上面基本一致，唯一的差別在于