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

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

easyui框架前后端交互_Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 转自:我心依旧.cnblogs.com/-clouds/p/11633786.html 框架 ...
easyui框架前后端交互_easyui前后端分离
陈旧的开发模式美工(ui工程师:出一个项目模型) 前端工程师做html页面 java工程师:将原有的html转成jsp,动态展示数据前后端强依赖,后端必须要等前端的html做好才能套jsp.如果h ...
easyui框架前后端交互_Easyui Datagrid增删改及后台交互(java)
最近项目的特殊性可算是把我折腾得够呛,从最开始的整站JS,到现在的Liferay,且不说后台,单单前台框架就让我从Dojo到YUI又到AUI.jQuery.ExtJS,常用API翻了一遍,常见问题解决 ...
【Spring MVC】Json 前后端合并
文章目录一.前端 1. Jackson.jsp 二.后端 1. Controller层 2.doamin_bean类三.实现效果一.前端 1. Jackson.jsp <%@ page l ...
echarts前后端交互数据_SpringBoot2.0实战（26）整合SpringSecurity前后端分离JSON交互...
在前端的文章中,我们实现了使用 SpringSecurity 实现登录鉴权,并使用数据库存储用户信息,实现登录鉴权 SpringBoot2.0实战(24)整合SpringSecurity之最简登录方法 ...
ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
JAVA中的前后端交互
JDBC 什么是JDBC java数据库连接(Java Database Connectivity) 有什么用利用 Java 代码, 可以操作数据库. 怎么用注册驱动获取数据库连接创建 Sta ...
[原创]前后端交互的方式整理
前言本来我只是想整理下前后端如何传输数据这种交互过程,大概流程如下: 前台使用ajax通过get/post等方式提交数据到后端后端如何获取参数经过业务处理后,返回前端对应的响应数据前端接受到响 ...
写给刚入门的前端工程师的前后端交互指南
转自原文写给刚入门的前端工程师的前后端交互指南作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据 ...

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

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

最新文章

热门文章