layui 分类树案例（springboot layui 分类树实现的完整例子）

最新推荐文章于 2024-06-28 03:45:22 发布

fengcai0123

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量1.4k

点赞数 2

分类专栏：前端 thymeleaf

本文链接：https://blog.csdn.net/fengcai0123/article/details/107143135

版权

本文提供了一个完整的SpringBoot结合LayUI实现分类树的案例，包括前端HTML、JS文件，后端Controller、Service、ServiceImpl、DAO、Mapper及自定义的BuildTree和TreeNode类的详细说明，通过这些代码可以实现分类数据的树形展示。

摘要由CSDN通过智能技术生成

前端 cateTree.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> 
<head th:include="layout :: htmlhead" th:with="title='角色管理'"></head>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}"></link>
<script th:src="@{/layui/layui.js}"></script> 
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-body" style="margin: 1%">

        <div id="test13" class="demo-tree-more"></div>
     </div>
    <script th:src="@{/js/myTree.js}"></script>
</div>
</body>
</html>

前端 myTree.js

$(function() {
	getData();
})
function getData(){ 
    $.ajax({
        type: "get",
        data: "id=0",
        url: "/category/findCategoryJson",
        success: function (data) {
            layui.use(['tree', 'util'], function() {
                var tree = layui.tree
                    , layer = layui.layer
                    , util = layui.util
                //无连接线风格
                tree.render({
                    elem: '#test13'
                    ,data: data