spring/wll/front/page/building/list.html

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">
                    <i class="layui-icon layui-icon-add-circle"></i>
                    新增
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-normal data-delete-btn" lay-event="update">
                    <i class="layui-icon layui-icon-edit"></i>
                    修改
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">
                    <i class="layui-icon layui-icon-delete"></i>
                    删除
                </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    </div>
</div>

<script>
    layui.use(['form', 'table','miniPage','miniAdmin','form','element','axios'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            axios = layui.axios,
            form = layui.form,
            miniAdmin = layui.miniAdmin,
            miniPage = layui.miniPage;

        table.render({
            elem: '#currentTableId',
            method:'post',
            url: 'building/query',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID'},
                {field: 'name',title: '名称'},
                {field: 'type', title: '类型',templet:function (row) {
                        return row.type+'人间';
                    }
                },
                {field: 'storeyNum', title: '总层数'},
                {field: 'sex', title: '性别',templet:function (row) {
                        if(row.sex == 0){
                            return '女';
                        }else{
                            return '男';
                        }}
                },
                {field: 'userId', title: '宿管员',templet:'<div>{{d.user.name}}</div>'},
                {field: 'remark',title: '备注'}
            ]],
            page: true,
            skin: 'line'
        });

        window.reload = function(){
            table.reload('currentTableId');
        }

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            //执行搜索重载
            table.reload('currentTableId', {
                where: data.field
            }, 'data');

            return false;
        });

        /**
         * toolbar事件监听
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {   // 监听添加操作
                let content = miniPage.getHrefContent('building/add.html');
                let openWH = miniPage.getOpenWidthHeight();
                let index = layer.open({
                    title: '添加',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'update') {  //修改操作
                let data = table.checkStatus('currentTableId').data;
                if(data.length!=1){
                    layer.msg("请选择一条记录修改");
                }else{
                    let content = miniPage.getHrefContent('building/update.html');
                    let openWH = miniPage.getOpenWidthHeight();
                    let index = layer.open({
                        title: '添加',
                        type: 1,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: [openWH[0] + 'px', openWH[1] + 'px'],
                        offset: [openWH[2] + 'px', openWH[3] + 'px'],
                        content: content
                    });
                    setFormValue(data[0]);
                    $('#userId2').val(data[0].userId)
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                }
            }else if (obj.event === 'delete') { //删除操作
                let data = table.checkStatus('currentTableId').data;
                if(data.length==0){
                    layer.msg("请选择要删除的数据");
                }else{
                    layer.confirm('真的删除行吗', function (index) {
                        //异步删除 map\filter\some\every
                        let arr = data.map(item=>item.id);
                        axios.get('building/delete?ids='+arr.join(",")).then(function (response) {
                            table.reload('currentTableId');
                            layer.msg(response.msg);
                        }).catch(function (error) {
                            layer.msg(error);
                        });
                        layer.close(index);
                    });
                }
            }
        });

        function setFormValue(data){
            form.val("updateForm",{
                id:data.id,
                name:data.name,
                type:data.type,
                sex:data.sex,
                storeyNum:data.storeyNum,
                userId:data.userId,
                remark:data.remark,
            })
        }

    });
</script>