效果图:
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将树形菜单结构传递到前端,从而动态实现树形菜单创建