springboot+echarts+layui使用记录

最新推荐文章于 2024-04-18 08:58:00 发布

游侠阿枫

最新推荐文章于 2024-04-18 08:58:00 发布

阅读量921

点赞数 22

文章标签： spring boot echarts layui

本文链接：https://blog.csdn.net/weixin_45999801/article/details/130031282

版权

之前java项目里面用到layui
layui官网
这是一种快速上手的前端框架，不需要搭建其他环境, 如vue运行环境,也不需要单独运行的框架。只需要下载对应的layui 依赖放入springboot的static文件夹下
在对应的 html文件中按照路径引用layui.js 和css ，启动项目访问页面就能显示需要的效果。在实践中发现 springboot+layui+thymeleaf 就能简单进行全栈开发。在本次开发中也会用到。
注意。在springboot中使用 thymeleaf需要进行配置

	  #templates 配置
spring
  mvc:
    static-path-pattern: /static/**
  thymeleaf:
    servlet.content-type: text/html
    mode: HTML
    cache: true
    prefix: classpath:/templates/
    suffix: .html

static 文件夹路径如下，将layui 资源下载并解压后直接丢进此文件夹路径。echarts 是当前项目中使用了，并不是强制需要。
在这里插入图片描述
templates文件夹路径是默认的html文件夹。当controller返回一个html文件路径的时候，会默认到此文件夹下寻找对应的同名html文件。
如下

html文件的 body部分代码如下

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div>
        <!-- 渲染html的时候，会先拿到从controller里面携带过来的参数值 userId 设置到此元素中，然后再去执行script里面的脚本代码 -->
            <input type="hidden" id="userId" th:value="${userId}">
            <div class="layui-inline">
                <button id="add" type="button" class="layui-btn layui-btn-fluid layui-btn-sm layui-btn-normal">添加</button>
            </div>
            <table id="demo" lay-filter="test"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs"  lay-event="edit">设置</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="setValue">编辑</a>
            </script>

        </div>
    </div>
</div>
</body>

script脚本代码如下

<script type="text/javascript" th:inline="none">
        //数据表格 th:inline="none" 必须设置 因为使用取值userId的表达式 必须开启这个设置
        // 前面这些都是使用layui组件的默认写法
        layui.use(['table','layer','form'], function(){
             // 获取table元素
            var table = layui.table;
            var layer=layui.layer;
             // 获取form表单
            var form=layui.form;
            // 获取jquery
            var $=layui.$;
            // 因为是先渲染的html所以这里取值是一定会有的
            var userId=$("#userId").val();
            // 渲染表格
            table.render({
            // table元素的id
                elem: '#demo'
                // 分页列表数据获取访问的url ，因为是在同一个项目中 所以可以不用写http://localhost:端口号 这些数据
                ,url:'/page?userId='+userId
                // 开启分页
                ,page:true
                , cols: [[
                // 设置每行数据
                    {field: 'id', width: 260, title: 'ID',hide:true},
                    {field: 'name', width: 260, align: 'center', title: '名字'},
                    // 使用 templet: function (d) {
		//对参数进行处理的函数逻辑 方式 对参数进行想要的数据设置 
	} 
                    {field: 'userColor', width: 260, align: 'center', title: '颜色' ,templet: function (d) {
                            return '<input  readonly="readonly" style="background-color:'+d.userColor+'"></input>'
                        }},
                    {field: 'sortNum', width: 260,  align: 'center', title: '排序'},
                    // toolbar 就是指定刚刚在secript脚本id 设置到此处。#barDemo 就是指定脚本的id 下面的脚本文件在html中已经存在，此处只是注释，不用打开。 
                    // <script type="text/html" 	//id="barDemo">
  //              <a class="layui-btn layui-btn-xs"  lay-event="edit">设置</a>
    //            <a class="layui-btn layui-btn-danger //layui-btn-xs" lay-event="setValue">编辑</a> </script>
                    {title: '操作', width: 650, toolbar: '#barDemo', align: "center"}
                ]],
                //可以选择的每页条数
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10,
                skin: 'line'
            });
			// 指定的元素的点击方法
            $("#add").click(function () {
            // layui 指定的打开弹窗的方法
                layer.open({
                	// layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外） 如果是要打开一个页面通常是设置type:2
                    type:2,
                    title:"添加",
                    // 打开页面的路径 默认会去找static文件夹 的此文件 所以如果打开的是一个html 那么此文件一定要在 static文件夹下，否则容易报错404
                    content: '../static/page/add.html',
                    // 打开页面的宽高 也可以设置成 100% 
                    area:["800px","800px"],
                    // 遮罩默认是0.3
                    shade:0.3,
                    // 弹出层动画 看官网中设置，此处无业务逻辑
                    anim:5,
                    // 弹出层关闭执行的方法
                    end:function(){
                        console.log("添加层被关闭了....");
                        //刷新整合页面
                        //location.reload();
                        //只重载表格
                        table.reload("demo");
                    }
                });
            })

            //获取按钮 在table元素上面 添加了lay-filter="test" 
       //<table id="demo" lay-filter="test"></table>
            table.on('tool(test)', function(obj){
                var data = obj.data; //获得当前行数据
                var tr=obj.tr//活动当前行tr 的  DOM对象
                if(obj.event === 'edit'){ //设置值
                    layer.open({
                        type:2,
                        title:"修改",
                        content: '../static/page/update.html',
                        area:["500px","500px"],
                        shade:0.3,
                        anim:5,
                        // 打开弹出层成功后执行的方法，但是这个方法时元素渲染后 才设置值的方法，如果想要在设置数据之前的话，在 content 中直接指定一个完整的url路径 如下 content:'http://localhost:8080/index/goUpdatePage?id='+data.id,  在对应的controller中用 model.addAttribute("id", id); 的方式来传递参数 在要开的hmtl页面总用el表达式来取值进行参数初始化 。 
                        // 这种方式适合在 不用在页面初始化的时候需要获取的需要的值的时候，的操作，否则取前面说的那种方式
                        success:function(layero,index){
                            var body= layer.getChildFrame('body',index);
                            body.find('#id').val(data.id);
                        },
                        end:function(){
                            console.log("添加层被关闭了....");
                            //刷新整合页面
                            //location.reload();
                            //只重载表格
                            table.reload("demo");
                        },
                        // 点击右上角的关闭弹窗按钮执行的操作
                        cancel: function(index, layero){
                            var body= layer.getChildFrame('body',index);
                            body.find('#id').val("");
                            table.reload("demo");
                        }
                    });

                } else if(obj.event === 'edit'){
                    layer.open({
                        type:2,
                        title:"设置风险区间值",
                        content: 'http://localhost:8080/index/targetList?targetId='+data.id,
                        area:["100%","100%"],
                        shade:0.3,
                        anim:5,
                        end:function(){
                            //只重载表格
                            table.reload("demo");
                        },
                        success:function(layero,index){
                          	// 初始化打开页面元素的值
                            var body= layer.getChildFrame('body',index);
                            body.find('#targetId').val(data.id);
                        },
                        cancel: function(index, layero){
                            // 删除旧的数据
                            var body= layer.getChildFrame('body',index);
                            body.find('#id').val("");
                        }

                    });
                }
            });
        })

    </script>