MVC +easyui +json 前后端交互动态生成树形菜单

效果图：

1、view端代码实现，引入jquery、easyui 的js文件，创建树形菜单标签<ul>，如下所示：

@{
    ViewBag.Title = "Home Page";
}
<link href="~/Area/icon.css" rel="stylesheet" />
<link href="~/Area/easyui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<div class="row">
    <h2>easy UI Tree</h2>
    <ul id="tt" class="easyui-tree"></ul>
</div>

<script type="text/javascript">

    $(function () {
        $('#tt').tree({
            checkbox: false,
            url: '/Home/GetTreeJson',
            onClick: function (node) {
                alert(node.id);

            }

        });

    });

</script>

 2、后端代码 实现

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace WebApplication3.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        //创建符合easyui树形菜单的数据结构
        [Serializable]
        public class EasyTreeData

        {
            public string id { get; set; }
            public string text { get; set; }
            public string state { get; set; }
            public string iconCls { get; set; }
            public List<EasyTreeData> children { get; set; }
            public EasyTreeData()
            {
                this.children = new List<EasyTreeData>();
                this.state = "open";
            }
            public EasyTreeData(string id, string text, string iconCls = "", string state = "open") : this()
            {
                this.id = id;
                this.text = text;
                this.state = state;
                this.iconCls = iconCls;
            }
            /// <summary>
            /// 常用构造函数
            /// </summary>
            public EasyTreeData(int id, string text, string iconCls = "", string state = "open", List<EasyTreeData> children = null)
                : this()
            {
                this.id = id.ToString();
                this.text = text;
                this.state = state;
                this.iconCls = iconCls;
                this.children = children;
            }
        }

        [HttpPost]
        public ActionResult GetTreeJson()

        {
            //创建数据集，通常可以通过查询数据库获取数据集，这里为了更加直观直接手动创建一个数据集；
            DataTable dt1 = new DataTable();
            dt1.Columns.Add("NodeID", typeof(int));
            dt1.Columns.Add("NodeName", typeof(string));
            dt1.Columns.Add("NodePID", typeof(int));
            dt1.Columns.Add("IconCls", typeof(string));
            DataRow dr = dt1.NewRow();
            dr["NodeID"] = 1;
            dr["NodeName"] = "食品";
            dr["NodePID"] = -1;
            dr["IconCls"] = "";
            dt1.Rows.Add(dr);
            dr = dt1.NewRow();
            dr["NodeID"] = 2;
            dr["NodeName"] = "苹果";
            dr["NodePID"] = 1;
            dr["IconCls"] = "";
            dt1.Rows.Add(dr);
            dr = dt1.NewRow();
            dr["NodeID"] = 3;
            dr["NodeName"] = "香蕉";
            dr["NodePID"] = 1;
            dr["IconCls"] = "";
            dt1.Rows.Add(dr);
            dr = dt1.NewRow();
            dr["NodeID"] = 4;
            dr["NodeName"] = "李子";
            dr["NodePID"] = 1;
            dr["IconCls"] = "";
            dt1.Rows.Add(dr);
            int PID = -1;
            //定义树形菜单数据集合，后续将集合转换成 json 传到前端展示。
            List<EasyTreeData> treeList = new List<EasyTreeData>();
            //定义根节点，这里默认根节点 为 NodePID = -1 的为根节点，实际情况根据实际修改值即可
            if (PID == -1)
            {
                //定义根节点数据集，查找根节点
                List<EasyTreeData> lists = new List<EasyTreeData>();
                
                for (int i = 0; i < dt1.Rows.Count; i++)
                {
                    string str = dt1.Rows[i]["NodePID"].ToString();
                    if (Int32.Parse(dt1.Rows[i]["NodePID"].ToString()) == PID)
                    {
                            EasyTreeData list = new EasyTreeData();
                            list.id = dt1.Rows[i]["NodeID"].ToString();
                            list.text = dt1.Rows[i]["NodeName"].ToString();
                            list.state = dt1.Rows[i]["NodePID"].ToString();
                            list.iconCls = dt1.Rows[i]["IconCls"].ToString();
                            lists.Add(list);
                    }
                }
                //遍历根节点获取子节点结合
                foreach (var info in lists)
                {
                    //定义子节点集合
                    List<EasyTreeData> child = new List<EasyTreeData>();
                    for (int i = 0; i < dt1.Rows.Count; i++)
                    {
                        if (dt1.Rows[i]["NodePID"].ToString() == info.id)
                        {
                            EasyTreeData clist = new EasyTreeData();
                            clist.id = dt1.Rows[i]["NodeID"].ToString();
                            clist.text = dt1.Rows[i]["NodeName"].ToString();
                            clist.state = dt1.Rows[i]["NodePID"].ToString();
                            clist.iconCls = dt1.Rows[i]["IconCls"].ToString();
                            child.Add(clist);
                        }
                    }
                    if (child.Count == 0)
                    {
                        //递归调用子节点查询，最后一层子节点
                        treeList.Add(new EasyTreeData(info.id, info.text, "icon-user"));
                    }
                    else
                    {
                        //递归调用子节点查询，将所有层的子节点都查询出来
                        treeList.Add(new EasyTreeData(Int32.Parse(info.id), info.text, "icon-user", "open", GetTreeJson2(info.id)));
                    }

                }

            }

            string json = ToJson(treeList);

            return Content(json);

        }

        private List<EasyTreeData> GetTreeJson2(string PID)

        {
            DataTable dt1 = new DataTable();
            dt1.Columns.Add("NodeID", typeof(int));
            dt1.Columns.Add("NodeName", typeof(string));
            dt1.Columns.Add("NodePID", typeof(int));
            dt1.Columns.Add("IconCls", typeof(string));

            DataRow dr = dt1.NewRow();
            dr["NodeID"] = 1;
            dr["NodeName"] = "食品";
            dr["NodePID"] = -1;
            dr["IconCls"] = "";
            dt1.Rows.Add(dr);
            dr = dt1.NewRow();
            dr["NodeID"] = 2;
            dr["NodeName"] = "苹果";
            dr["NodePID"] = 1;
            dr["IconCls"] = "";
            dt1.Rows.Add(dr);
            dr = dt1.NewRow();
            dr["NodeID"] = 3;
            dr["NodeName"] = "香蕉";
            dr["NodePID"] = 1;
            dr["IconCls"] = "";
            dt1.Rows.Add(dr);
            dr = dt1.NewRow();
            dr["NodeID"] = 4;
            dr["NodeName"] = "李子";
            dr["NodePID"] = 1;
            dr["IconCls"] = "";
            dt1.Rows.Add(dr);
            List<EasyTreeData> treeList = new List<EasyTreeData>();
            List<EasyTreeData> lists = new List<EasyTreeData>();
            for (int i = 0; i < dt1.Rows.Count; i++)
            {
                string str = dt1.Rows[i]["NodePID"].ToString();
                if (dt1.Rows[i]["NodePID"].ToString() == PID)
                {
                    EasyTreeData list = new EasyTreeData();
                    list.id = dt1.Rows[i]["NodeID"].ToString();
                    list.text = dt1.Rows[i]["NodeName"].ToString();
                    list.state = dt1.Rows[i]["NodePID"].ToString();
                    list.iconCls = dt1.Rows[i]["IconCls"].ToString();
                    lists.Add(list);
                }
            }
            foreach (var info in lists)
            {
                List<EasyTreeData> child = new List<EasyTreeData>();
                for (int i = 0; i < dt1.Rows.Count; i++)
                {
                    if (dt1.Rows[i]["NodePID"].ToString() == info.id)
                    {
                        EasyTreeData clist = new EasyTreeData();
                        clist.id = dt1.Rows[i]["NodeID"].ToString();
                        clist.text = dt1.Rows[i]["NodeName"].ToString();
                        clist.state = dt1.Rows[i]["NodePID"].ToString();
                        clist.iconCls = dt1.Rows[i]["IconCls"].ToString();
                        child.Add(clist);
                    }
                }
                if (child.Count == 0)

                {
                    treeList.Add(new EasyTreeData(info.id, info.text, "icon-user"));

                }

                else

                {
                    treeList.Add(new EasyTreeData(Int32.Parse(info.id), info.text, "icon-user", "closed", GetTreeJson2(info.id)));

                }

            }

            return treeList;

        }

        protected string ToJson(object obj)

        {
            string jsonData = (new JavaScriptSerializer()).Serialize(obj);

            return jsonData;

        }
    }
}

通过json将树形菜单结构传递到前端，从而动态实现树形菜单创建