自定义“树”节点 （前端框架：layui+SpringMVC整合）

已于 2022-10-11 16:34:14 修改
阅读量487 收藏
点赞数 4
分类专栏： java 文章标签： 前端框架 layui javascript servlet spring
于 2022-10-11 16:31:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66466770/article/details/127266284
版权 
html如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>树</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
</head>
<style>
    #test9 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 200px;
        height: 300px;
    }
</style>
<body>
<div id="test9" class="demo-tree demo-tree-box"></div>
<!-- 注意：项目正式环境请勿引用该地址 -->
<script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
<script src="./js/commons.js"></script>
<script src="./js/jquery-1.7.2.js"></script>

<script>
    $.ajax({
        url: baseUrl + "/freeServlet/getFreeAll",
        type: "post",
        dataType: "json",
        success: function (msg) {
            layui.use(['tree', 'util'], function () {
                var tree = layui.tree
                    , layer = layui.layer
                    , util = layui.util
                    //模拟数据
                    , data = [{
                        title: '一级1'
                        , id: 1
                        , field: 'name1'
                        , checked: true
                        , spread: true
                        , children: [{
                            title: '二级1-1 可允许跳转'
                            , id: 3
                            , field: 'name11'
                            , href: '/'
                            , children: [{
                                title: '三级1-1-3'
                                , id: 23
                                , field: ''
                                , children: [{
                                    title: '四级1-1-3-1'
                                    , id: 24
                                    , field: ''
                                    , children: [{
                                        title: '五级1-1-3-1-1'
                                        , id: 30
                                        , field: ''
                                    }, {
                                        title: '五级1-1-3-1-2'
                                        , id: 31
                                        , field: ''
                                    }]
                                }]
                            }, {
                                title: '三级1-1-1'
                                , id: 7
                                , field: ''
                                , children: [{
                                    title: '四级1-1-1-1 可允许跳转'
                                    , id: 15
                                    , field: ''
                                    , href: '/docs/'
                                }]
                            }, {
                                title: '三级1-1-2'
                                , id: 8
                                , field: ''
                                , children: [{
                                    title: '四级1-1-2-1'
                                    , id: 32
                                    , field: ''
                                }]
                            }]
                        }, {
                            title: '二级1-2'
                            , id: 4
                            , spread: true
                            , children: [{
                                title: '三级1-2-1'
                                , id: 9
                                , field: ''
                                , disabled: true
                            }, {
                                title: '三级1-2-2'
                                , id: 10
                                , field: ''
                            }]
                        }, {
                            title: '二级1-3'
                            , id: 20
                            , field: ''
                            , children: [{
                                title: '三级1-3-1'
                                , id: 21
                                , field: ''
                            }, {
                                title: '三级1-3-2'
                                , id: 22
                                , field: ''
                            }]
                        }]
                    }, {
                        title: '一级2'
                        , id: 2
                        , field: ''
                        , spread: true
                        , children: [{
                            title: '二级2-1'
                            , id: 5
                            , field: ''
                            , spread: true
                            , children: [{
                                title: '三级2-1-1'
                                , id: 11
                                , field: ''
                            }, {
                                title: '三级2-1-2'
                                , id: 12
                                , field: ''
                            }]
                        }, {
                            title: '二级2-2'
                            , id: 6
                            , field: ''
                            , children: [{
                                title: '三级2-2-1'
                                , id: 13
                                , field: ''
                            }, {
                                title: '三级2-2-2'
                                , id: 14
                                , field: ''
                                , disabled: true
                            }]
                        }]
                    }, {
                        title: '一级3'
                        , id: 16
                        , field: ''
                        , children: [{
                            title: '二级3-1'
                            , id: 17
                            , field: ''
                            , fixed: true
                            , children: [{
                                title: '三级3-1-1'
                                , id: 18
                                , field: ''
                            }, {
                                title: '三级3-1-2'
                                , id: 19
                                , field: ''
                            }]
                        }, {
                            title: '二级3-2'
                            , id: 27
                            , field: ''
                            , children: [{
                                title: '三级3-2-1'
                                , id: 28
                                , field: ''
                            }, {
                                title: '三级3-2-2'
                                , id: 29
                                , field: ''
                            }]
                        }]
                    }]
                    //模拟数据1
                    , data1 = msg.data
                //开启节点操作图标
                tree.render({
                    elem: '#test9'
                    , data: data1
                    , edit: ['add', 'update', 'del'] //操作节点的图标
                    , click: function (obj) {
                        layer.msg(JSON.stringify(obj.data));
                        console.log("asd" + this.edit[0]);
                    },
                    operate: function (obj) {
                        var type = obj.type; //得到操作类型：add、edit、del
                        var data = obj.data; //得到当前节点的数据
                        var elem = obj.elem; //得到当前节点元素
                        console.log(type);
                        console.log(data);
                        console.log(elem);
                        var id="";
                        //add
                        if (type == "add") {
                            $.ajax({
                                url: baseUrl+"/freeServlet/addFree?id="+data.id,
                                type:"get",
                                dataType:"json",
                                success:function (resp){
                                    console.log(resp);
                                    id=resp;
                                }
                            })
                        }
                        //update
                        if (type == "update") {
                            $.ajax({
                                url: baseUrl+"/freeServlet/update?title="+data.title,
                                type:"get",
                                dataType:"json",
                                success:function (resp){
                                    alert("ajax")
                                }
                            })
                        }
                    //
                        if (type == "del") {
                            $.ajax({
                                url: baseUrl+"/freeServlet/del?id="+data.id,
                                type:"get",
                                dataType:"json",
                                success:function (resp){
                                    alert("ajax");
                                }
                            })
                        }
                    }
                });
            });
        }
    })
</script>
</body>
</html>

后端代码核心：

package com.santi.servlet;

import com.santi.msg.MsgResult;
import com.santi.pojo.Free;
import com.santi.serivce.FreeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/freeServlet")
public class FreeServlet {

    @Autowired
    private FreeService freeService;

    @RequestMapping("/getFreeAll")
    public MsgResult getFreeAll() {
        System.out.println("进来了");
        List<Free> list = freeService.getFreeAll();
        //字典map，用于后面的遍历好查找
        Map<Integer, Free> nodeMap = new HashMap<>();
        //转换成map，key --> id , value -->node对象
        for (Free node : list) {
            nodeMap.put(node.getId(), node);
        }
        List<Free> result = new ArrayList<Free>();
        for (Free node : list) {
            if (node.getPid().equals(0)) {
                //根目录
                result.add(node);
            } else {
                //找到父节点
                Free pNode = nodeMap.get(node.getPid());
                List<Free> child = pNode.getChildren();
                if (child == null) {
                    child = new ArrayList<Free>();
                }
                child.add(node);
                pNode.setChildren(child);
            }
        }
//        System.out.println(JSON.toJSONString(result));
        MsgResult msgResult = new MsgResult();
        msgResult.setData(result);
        return msgResult;
    }

    @RequestMapping("/addFree")
    public Integer addFree(@RequestParam(value = "id", required = false) Integer id) {
        if (id != null) {
            int i = freeService.addFreePid(id);
        }
        Free ids = freeService.getNewId();

        System.out.println(id);
        return ids.getId();
    }

    @GetMapping("/update")
    public void update(@RequestParam(value = "title", required = false) String title) {
        Integer integer = addFree(null);
        //        修改title
        int i = freeService.updateTitle(title, integer);
        System.out.println(i);
    }

    @RequestMapping("/del")
    public void del(@RequestParam(value = "id", required = false) String id, HttpServletRequest request) {

        System.out.println("我是iddel" + id);
        if ("undefined".equals(id)||id==null) {
            Integer integer = addFree(null);
            int i = freeService.del(integer);
        }else{
            int i1 = Integer.parseInt(id);
            int i = freeService.del(i1);
        }
    }

}
编程小朱
关注
专栏目录
layui tree 动态选中_Layui tree定制化(自定义增删改操作、选中变色）
weixin_35696092的博客
12-31 3580
Layui tree定制化(自定义增删改操作、选中变色)一、自定义增删改操作Layui tree自带的增删改操作，太鸡肋不太符合我们的要求。新增修改弹框操作、删除提示确实框。1.添加自定义属性customOperate，需要修改源码。tree.render({elem: '#test1',data: data,onlyIconControl: true,edit: ['add', 'update'...
layui-tree实现Ajax异步请求后动态添加节点
热门推荐
Yoson的博客
04-20 2万+
最近在弄一个产品分类管理，是一个树形菜单的形式，用的是layui-tree ,由于它并没有动态添加节点，所以只能自己刚了。 大概效果如左图 具体的实现是当我鼠标移入“长袖”这个分类...
基于layui自定义树形组件
weixin_43374226的博客
12-10 3212
基于layui自定义树形组件文档 - layui.sw365tree 简介：针对于自己的需求所自定义的树形组件 模块加载名称：sw365tree 1· 快速使用 var tree = layui.sw365tree; 通过 tree.render() 方法指定一个元素，便可快速创建一个 tree 实例。 <!DOCTYPE html> <html> <head&...
解决layui树形控件 添加节点 把弹框关闭后自动生成未命名节点 问题
WuqibuHuan的博客
04-15 895
** 问题： ** 点击添加节点 假如我们之间点取消的话 选中的节点会自动添加一个节点 名称为未命名 很是影响用户体验 还要每次修改或者删除掉！ 困扰好久~ 这时想到的是layui框架自带的tree.js 尝试着去翻看源码，由于比较写的比较惊喜 经过不断尝试的情况下，终于找到了解决的方法 如下： 我们找到layui文件中的tree.js 2. 在layui.tree文件中搜索 if (“add” == f) 3. 将 var w = r.operate &&
php layui的tree案例,layui定义一个模块并使用的实例
weixin_29592699的博客
03-25 252
在使用layui的过程，有几个方法需要被多个js引用，所以我按照文档，自定义了一个layui的模块，下面实现过程(推荐：layui使用教程)先定义一个模块//定义模块layui.define(['form'], function(exports){var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功var $ = layui.$;var obj = {c...
基于SpringBoot开发的后台管理、系统脚手架Github\Gitee收集
qq_37356733的博客
06-24 7434
GitHub: 项目基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue的前后端分离的后台管理系统 项目简介eladmin基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue的前后端分离的后台管理系统， 权限控制的方式为RBAC，项目支持数据字典与数据权限管理，支持一键生成前后端代码，支持...
SpringBoot 教程详解 项目演示 资源整合 个人总结 狂神笔记（下）
super_song的博客
04-19 974
文章目录十一、Shiro1.Shiro 简介什么是 shiro有哪些功能Shiro架构（外部）Shiro 架构（内部）2.快速使用Subject 分析3.SpringBoot 集成 ShiroSpringBoot整合Shiro环境搭建Shiro实现登录拦截Shiro实现用户认证Shiro整合MybatisShiro实现用户授权Shiro整合Thymeleaf完整代码Shiro 个人理解十二、SpringBoot 开源项目十三、Swagger1.Swagger简介2.SpringBoot集成Swagger创建
狂神说——SpringBoot学习
weixin_44543307的博客
12-06 5144
Springboot 学习笔记Springboot简介什么是微服务？ThymeleafDuridSpringboot整合mybatisSpringSecurity安全Shiroswagger定时任务springboot 整合分布式 dubbo+ zookeeper+ springbootDubboRPC（两大核心：通讯，序列化）Zookeeper总结 学习源码 spring官网 springboot官网 spring-security版本下载 狂神官网学习 也可以搜索B站 （狂神说） Springboot简
国内优秀的java开源saas项目分享
年少有为
07-14 4388
国内优秀的java开源项目分享
一个基于SpringBoot开发的RBAC系统，非常适合新手入门JavaWeb代码审计实战的系统，长文警告，要好好学习。
Power7089的博客
08-08 3138
一个基于SpringBoot开发的RBAC系统，非常适合新手入门JavaWeb代码审计的系统，长文警告，要好好学习哦。
layui-tree树形模板
05-30
layui-tree是layui提供的树形管理，可以用于后台做权限列表的使用，只需要后台整理好数据给前台展示，勾选之后提交给后台即可。
layui-tree树形组件改写，可编辑、上移、下移、拖拽修改
04-13
将文件直接复制到layui/lay/modules目录下，会覆盖layui原有的tree.js，调用方法与layui树形组件的适应方式一致，新增的方法可在文件中查看
使用SpringMVC框架的项目树形结构菜单功能的实现
慧写代码
07-18 5461
当选择的节点具有单一性质时，树形结构菜单在项目中会经常使用到。这里，笔者就以实例介绍一下树形菜单功能的实现。效果如下图所示： 实现树形菜单主要的思路：前端向服务器发送请求，获取服务器响应的数据，解析数据，显示成树形菜单，最关键的两点就是：第一，前端需要什么样的数据？树形菜单需要的数据无非就是一个对象里面包含一个该对象的集合，具体看前端选择什么样的框架，不使用框架也可以，使用纯页面和原生j...
Layui tree 下拉菜单树
weixin_50478878的博客
11-22 313
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta n.
layui树组件增加同级节点
shengjunlintianxia的博客
01-27 623
效果： //模拟数据1 data1 = [{ title: '问卷1' ,id: 1000 },{ title: '问卷2' ,id: 1001 }] function addClassify(othis){ var len = data1.length var pro = data1[len.
改造layui-树（tree）组件支持添加、编辑、删除的自定义（弹框）操作
liona_koukou的博客
08-20 2万+
新公司的项目用了layui，使用过程中踩了不少坑，大多来自tree组件，接下来如果有时间会一一码下来 layui的tree组件可以开启节点操作（添加、编辑、删除），用过的同学应该了解官方提供的逻辑是点击添加树上新增一层并命名为“未命名”然后我们在操作节点的回调operate里可以做与后台的交互，这样一个添加操作要走两步：添加+编辑。而按照我们的代码习惯添加的接口走完之后我们会重新绘制树——tre...
layui树形结构
qq_37149303的博客
05-18 3894
 最近接触Layui框架，感觉还不错，就总结一下在使用layui的树形结构的使用。       在官网上查看时发现关于layui的使用都是静态添加的代码，如果我想动态添加树形节点时遇到了很大的问题，官网的静态示例代码如下：[javascript] view plain copy&lt;span style="font-family:SimSun;"&gt;&lt;span style="font-...
Layui—tree树形结构的使用
OpenSource_的博客
08-16 3199
树形结构在实际开发中很长用到，比如部门管理，权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI的树形结构，之后写了一个小案例整理一下。 官网地址：https://www.layui.com/v1/doc/modules/tree.html 先看一下显示的效果图。 点击节点右面会显示对应部门的详情信息，可以修改。可以自定义按钮添加部门，也可以直接用自带的方法对部门...
vue + element ui工程，Tree 树形控件展示指定值，比如name
qq_43314764的博客
03-09 1098
1.element ui的Tree 树形控件数据官方例子中展示label。 2.本文实现目的：采用数据中的name作为展示项。 数据效果图： 数据： data() { const data = [ { id: 1, name: '一级 1', iconType: 'group', ch
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程小朱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值