LayUI列表

ggr 2019年12月20日 17次浏览

前言

这几天帮同事做一个增删改查的页面,前端突发奇想用layui,后端使用SpringBoot,写的时候遇到了一些问题,写在这里记录下来.

Table

首先引入js,css文件,这里用了thymleaf标签

<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/jquery/jquery-3.3.1.js}"></script>

添加table标签,使用layui.js渲染

<div class="demoTable">
    企业名称
    <div class="layui-inline">
        <input class="layui-input" name="area" id="demoReload" autocomplete="off">
    </div>
    企业归属地
    <div class="layui-inline">
        <input class="layui-input" name="area" id="demoReload2" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
    <button type="layui-btn" class="layui-btn layui-btn-primary" onclick="reset()">重置</button>
</div>
<br>
<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="del">删除</a>
</script>
<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

使用js进行渲染

<script th:inline="none">//使用th:line="none"表示非thymleaf标签
    layui.use('table', function () {
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: '/data'
            ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
            , cols: [[
                {field: 'name', title: '企业名称', fixed: 'left'}
                , {field: 'area', title: '企业归属地',}
                , {field: 'registerMoney', title: '注册资本', sort: true}
                , {field: 'size', title: '企业规模', sort: true}
                , {field: 'listedSituation', title: '上市情况'}
                , {field: 'financingSituation', title: '融资情况',}
                , {field: 'businessScope', title: '经营范围'}
                , {field: 'businessStatus', title: '经营状态'}
                , {field: 'bossName', title: '法人名称'}
                , {field: 'creditScore', title: '信用评分', sort: true}
                , {field: 'id', title: 'ID', hide:true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            , id: 'testReload'
            , page: true
            //, height: 310

        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                console.log(demoReload);
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        name: demoReload.val(),
                        area: $('#demoReload2').val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听工具条
        table.on('tool(user)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    del(data.id);
                });
            } else if(obj.event === 'edit'){
                //console.log(data.id);
                edit(data.id);
               // layer.alert('编辑行:<br>'+ JSON.stringify(data))
            }
        });
    });
function edit(id) {
    window.open('/add?id=' + id);
}
function del(id) {
    $.ajax({
        type: 'GET',
        url:'/del',
        data:{id: id},
        success:function (data) {
            console.log(data);

        }
    });

}
function reset() {
    $('#demoReload').val("");
    $('#demoReload2').val("");

}
</script>
  • 开启导出工具栏
  • 查询接口为/data,传入参数为name,area
  • 删除接口为/del
  • 开启分页,需要在后端做好分页数据接口 页面效果: index_project_list