ace treeview.php json,基於Bootstrap的JQuery TreeView樹形控件，數據支持json字符串、list集合（MVC5）<一>...

BZ第一次自己寫博客，心情好激動！！BZ也是小菜，本文如果有什么不對的地方，希望大神們多多指教，也希望和我一樣的小菜多多學習。BZ在這里謝過各位。

BZ最近看了很多博友的有關TreeView的博客，發現很多都是WebForm、JQuery的。因為BZ使用的是MVC的原因，所以決定寫一寫關於MVC和Bootstrap的TreeView。

PS:基於Bootstrap的JQuery TreeView樹形控件，JQuery版本為2.1.1(下載網上的基於Bootstrap的JQuery TreeView樹形控件)。。。

本文支持兩種方式的數據，一種為List集合，一種為json字符串。

先來介紹一下后台返回list集合(推薦使用此方法)：

控制器代碼如下：

public static List DInfo = new List();///

///TreeView視圖///

///

public ActionResult May(string TypeCode,intparentId)

{

ViewBag.TypeCode=TypeCode;

ViewBag.ParentId=parentId;returnView();

}

[HttpPost]public ActionResult GetTreeData(string TypeCode,intparentId)

{

List DInfo = dbll.GetModelList("TypeCode="+TypeCode);return Json(GetChildNodes(0,newNodeModel(){}, DInfo).nodes);

}///

///GetChildNodes方法，此方法使用遞歸///

///

///

public NodeModel GetChildNodes(int parentId,NodeModel childnodestr,ListDInfo)

{

List DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) ==parentId).ToList();for (int i = 0; i < DictionaryList.Count; i++)

{

NodeModel NewNode= newNodeModel();

NewNode.DicId=DictionaryList[i].DicId;

NewNode.text=DictionaryList[i].DICName;

NewNode.ParentId=DictionaryList[i].ParentId;

childnodestr.nodes.Add(NewNode);

GetChildNodes(NewNode.DicId, NewNode, DInfo);

}returnchildnodestr;

}View Code

視圖代碼如下：

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('不好意思，數據忘記帶上了。。。');

}

});View Code

第二種方式為后台返回json字符串這種方式(此方式為后台拼接json字符串傳給前台)：

BZ不建議大家采用這種方式，比較容易出錯。

public ActionResult May(string TypeCode,intparentId)

{

ViewBag.TypeCode=TypeCode;

ViewBag.ParentId=parentId;returnView();

}publicActionResult GetTreeData()

{//創建jsondata對象

StringBuilder jsonData = newStringBuilder();//拼接json字符串 開始{

jsonData.Append("[");//調用GetChildNodes方法，默認傳參試為0(0表示根節點菜單選項)

jsonData.Append(GetChildNodes(0));//閉合Node子類數組 ]

jsonData.Append("]");//返回json字符串

returnJson(jsonData.ToString());

}///

///GetChildNodes方法，此方法使用遞歸///

/// param >

/// < returns > returns >

public string GetChildNodes(intparentId)

{//為DInfo賦值(DInfo承載頁面所需的值(間接將值傳給頁面))，查詢所有的數據

List DInfo = dbll.GetModelList("");//創建ChiidNodeStr變量

StringBuilder ChildNodeStr = newStringBuilder();//查詢符合條件的數據(ParentId=0)，DictionaryList接收數據

List 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 = newNodeModel();//分別為字段賦值

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(',');

}View Code

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

var defaultData = eval(data);

因為我們后台是拼接的json字符串的緣故，我們需要將json字符串轉化為json數組(網上下載的基於Bootstrap的JQuery TreeView樹形控件僅僅支持json數組)，我也是費了很大的勁才找到的。使用MVC+Bootstrap開發TreeView的同學要注意！！！

另外，對於一些對性能要求比較高的人來說可能會認為前台的Ajax沒有什么用處，白白做了一次前后台交互，是的，前面比較容易理解，由於時間原因(餓暈了！)，下次BZ的博客中會給大家帶來一種更為“無壓力的方式”。

本文博客特別感謝方總、李總、張總的指點。

非常感謝各位觀看本博客，BZ希望和更多的小菜一起成長，同樣也希望大神的你提出建議。如果有不足之處還望各位不吝賜教！再次感謝各位！