树状图

树状图

 

此树状图的数据只有一大一小的数据

在MVC如何做出一个树状图？上图为效果图

先看一下视图代码，如下图

 

再来看一下控制器的代码

public ActionResult ReturnTreeData()

        {

      //创建列表，列表数据定为字典，接收方法最后传过来的数据

          List<Dictionary<string, object>> data = TreeData();

            return Json(data, JsonRequestBehavior.AllowGet);

        }

public List<Dictionary<string, object>> TreeData()

        {

            //创建列表，列表数据定为字典

    List<Dictionary<string, object>> jsonList =  

new List<Dictionary<string, object>>();

            //获取大类的数据

            var list = myModel.SYS_Dish.ToList();

            //开始大类的循环

            foreach(SYS_Dish db in list)

            {

                //创建字典

                Dictionary<string, object> json = new Dictionary<string, object>();

                //将大类数据添进字典

                json.Add("title", db.DishName);

                json.Add("id", db.DishID);

                //创建列表，列表数据定为字典

List<Dictionary<string, object>> jsonLists

 = new List<Dictionary<string, object>>();

                //获取小类数据，根据大类ID筛选

                var lists = myModel.SYS_Sdish.Where(m => m.DishID == db.DishID).ToList();

                //开启小类的循环

                foreach(var item in lists)

                {

                    //创建小类的字典

     Dictionary<string, object> jsons =

new Dictionary<string, object>();

                    //将小类的数据添加进字典

                    jsons.Add("title", item.SdishName);

                    jsons.Add("id", item.SdishID);

                    //添加进列表

                    jsonLists.Add(jsons);

                }

                //将最终的小类列表添加进大类的children属性

                json.Add("children", jsonLists);

                //将这一层的大类添加进最终的列表里面

                jsonList.Add(json);

            }

            return jsonList;

        }

这样一个树状图的制作就完成了！