后台递归+layui树形菜单（组织架构）+Ajax
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组织架构</title>
<link rel="stylesheet" href="~/layuimini-master/lib/layui-v2.5.5/css/layui.css" media="all">
<link rel="stylesheet" href="~/layuimini-master/css/public.css" media="all">
<style>
.layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
height: 34px;
line-height: 34px;
padding: 0 8px;
}
</style>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<div>
<div id="organizationTree"></div>
</div>
</div>
</div>
<!-- 操作列 -->
@*<script type="text/html" id="auth-state">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>*@
<script src="~/layuimini-master/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="~/layuimini-master/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
type: "post",
url: "/organization/organizationTree",
dataType: 'json',
async: true,//是否异步请求
success: function (data) {
layui.use('tree', function () {
var tree = layui.tree;
tree.render({
elem: '#organizationTree', //绑定元素
contentType: 'application/json',
data: data
})
})
}
})
</script>
</body>
</html>
后台递归
一，主方法调用
using FK_UAS.Business;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace FK_UAS.Controllers
{
public class organizationController : Controller
{
// GET: organization
public ActionResult Index()
{
return View();
}
public ActionResult organizationTree()
{
List<dynamic> data = organization.Json_GetDepartmentTree(0);
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
二，菜单主体类（配合layuiTree模块使用的固定json格式）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace FK_UAS.Models
{
public class organizationTree
{
public int id { get; set; }
public int pid { get; set; }
public string title { get; set; }
public dynamic children { get; set; }
}
}
三，递归
using FK_UAS;
using FK_UAS.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace FK_UAS.Business
{
public class organization
{
/// <summary>
/// 生成tree主方法
/// </summary>
/// <param name="pid"></param>
/// <returns></returns>
public static List<dynamic> Json_GetDepartmentTree(int pid)
{
//新建菜单主体类与T4生成的类json格式不匹配，故新建类，且使用select d_id as id语句改变列名称
string sql = " select d_id as id,d_parid as pid,d_name as title from [sys_department] ";
var Data = DBManage.GetListBySql<organizationTree>(string.Format(sql));
var model = new organizationTree();
creatTheTree(pid, Data, model); //根节点的parentBh值为"0"
return model.children;
}
/// <summary>
/// 递归方法
/// </summary>
/// <param name="pid"></param>
/// <param name="Data"></param>
/// <param name="outmodel"></param>
public static void creatTheTree(int pid, List<organizationTree> Data, organizationTree outmodel)
{
var child = Data.Where(e => e.pid == pid).ToList();
var Children = new List<dynamic>();
foreach (var item in child)
{
//递归循环
Children.Add(item);
creatTheTree(item.id, Data, item);
}
outmodel.children = Children; //由于对象是引用类型，因为可以改变参数的值
}
}
}
参考：
https://www.layui.com/v1/doc/base/modules.html
https://www.layui.com/doc/modules/tree.html#data
https://www.layui.com/demo/tree.html
https://www.cnblogs.com/houmin0036/articles/9936690.html
https://www.layui.com/doc/modules/tree.html#click
