后台递归+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

posted @ 2020-03-08 21:51 姜佳泉阅读(4781) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

阅读排行：
· “你见过凌晨四点的洛杉矶吗？”--《我们为什么要睡觉》
· 提示词工程师自白：我如何用一个技巧解放自己的生产力
· C# 从零开始使用Layui.Wpf库开发WPF客户端
· C#/.NET/.NET Core技术前沿周刊 | 第 31 期（2025年3.17-3.23）
· 如何不购买域名在云服务器上搭建HTTPS服务