基於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<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字符串傳給前台）：

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

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("{");
                //實例化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(',');
        }

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

 var defaultData = eval(data); 

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

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

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

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