Spring Boot + LayUI 批量修改數據 數據包含着對象

頁面展示

 

HTML 代碼

<blockquote class="layui-elem-quote demoTable">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" value="" placeholder="請輸入關鍵字" class="layui-input search_input">
        </div>
        <a class="layui-btn search_btn" href="javascript:;">查詢</a>
    </div>

    <div class="layui-inline">
        <a class="layui-btn layui-btn-normal newsAdd_btn" href="adminSave.html">添加管理員</a>
    </div>

    <div class="layui-inline" >
        <a class="layui-btn closeBtn" data-type="closeBtn"  href="javascript:;" style="background-color: #f81eff6e;">批量禁用</a>
    </div>

    <div class="layui-inline" >
        <a class="layui-btn startBtn" data-type="startBtn"  href="javascript:;" style="background-color: rgba(232,154,166,0.43);">批量啟用</a>
    </div>
</blockquote>

<!-- layui 渲染 數據 -->
<table class="layui-hide" id="adminInfoList" lay-filter="demo"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="修改管理員信息"> <i class="layui-icon">&#xe642;</i></a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="queryLog" title="查看管理員信息"> <i class="layui-icon">&#xe615;</i></a>
</script>

JS 代碼

layui.config({
    base: "js/"
}).use(['table', 'layer', 'form', 'jquery'], function () {
    var table = layui.table,
        form = layui.form,
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        $ = layui.jquery;

/***
 *
 * 顯示全部管理員信息
 *
 */
table.render({
    elem: '#adminInfoList'
    , url: '/queryAdminAll'
    , cols: [[
        {type: 'checkbox', fixed: 'left', value: 'adminId'},
        {
            field: 'adminInfoEntity', title: '頭像',
            templet: function (data) {
                return '<img class="layui-circle adminImage" width="26" height="26" src=../../' + data.adminInfoEntity.adminInfoImage + '>'
            }
        }
        , {field: 'adminAccount', title: '登錄名'}
        , {
            field: 'adminInfoEntity', title: '郵箱', sort: true,
            templet: function (data) {
                return '<span>' + data.adminInfoEntity.adminInfoEmail + '</span>'
            }
        }
        , {
            field: 'adminInfoEntity', title: '權限',
            templet: function (data) {
                if (data.adminInfoEntity.adminInfoClass == 0) {
                    return '<span>' + "普通管理員" + '</span>'
                }
                if (data.adminInfoEntity.adminInfoClass == 1) {
                    return '<span>' + "超級管理員" + '</span>'
                }

            }
        }
        , {
            field: 'adminInfoName', title: '實名',
            templet: function (data) {
                return '<span>' + data.adminInfoEntity.adminInfoName + '</span>'
            }
        }
        , {
            field: 'adminInfoEntity', title: '狀態', width: 85, templet: function (data) {
                if (data.adminInfoEntity.adminInfoCode == 1) {

                    return '<div> <input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data.adminInfoEntity.adminInfoId + '' +
                        ' lay-text="啟用|禁用"  value=' + data.adminInfoEntity.adminInfoCode + '></div>'
                } else {
                    return '<div> <input type="checkbox" lay-skin="switch" name="codeSwitch"  switchId=' + data.adminInfoEntity.adminInfoId + ' lay-filter="switchTest"' +
                        'lay-text="啟用|禁用" value=' + data.adminInfoEntity.adminInfoCode + '></div>'
                }
            }
        }
        , {
            field: 'adminInfoEntity', title: '性別',
            templet: function (data) {
                if (data.adminInfoEntity.adminInfoSex == 2) {
                    return '<span>' + '男' + '</span>'
                }
                if (data.adminInfoEntity.adminInfoSex == 0) {
                    return '<span>' + '保密' + '</span>'
                }
                if (data.adminInfoEntity.adminInfoSex == 1) {
                    return '<span>' + '女' + '</span>'
                }

            }
        }
        , {
            field: 'adminInfoEntity', title: '手機號碼', sort: true,
            templet: function (data) {
                return '<span>' + data.adminInfoEntity.adminInfoPhone + '</span>'
            }
        }
        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 140}
    ]]
    , limit: 15
    , limits: [15, 20, 25, 50, 100]
    , parseData: function (data) {
        /**
         * 打印數據
         *
         */
        console.log(data)
    }
    /**
     * 開啟分頁
     */
    , page: true
    , id: 'idTest'
});

  /**
    * 批量關閉 管理員狀態
    *
    * */

var $ = layui.$, active = {
        closeBtn: function () {
            var $checkbox = $('table input[type="checkbox"][name="layTableCheckbox"]');
            var $checked = $('table input[type="checkbox"][name="layTableCheckbox"]:checked');

            if ($checkbox.is(":checked")) {
                var checkStatusId = table.checkStatus('idTest'),
                    data = checkStatusId.data,
                    adminInfoId = [];
                for (var i in data) {
                    adminInfoId.push(data[i].adminInfoEntity.adminInfoId)
                }

                layer.confirm('確定禁用？', {icon: 3, title: '提示信息'}, function (index) {
                    var index = layer.msg('禁用中，請稍候', {icon: 16, time: false, shade: 0.8});

                    $.ajax({
                        url: '../admin/updateAdminInfoCodeClose',
                        data: {
                            adminInfoCode: 0,
                            adminInfoId: adminInfoId
                        },
                        type: 'post',
                        success: function (data) {

                            layer.msg("禁用成功", {offset: 'rb', shift: 6})
                            setTimeout(function () {
                                window.location.href = window.location.href;
                            }, 3000);

                        }, error: function (data) {
                            layer.msg("稍等一會..", {offset: 'rb', shift: 6})
                        }

                    })

                    layer.close(index);

                })
            } else {
                layer.msg("請選擇需要禁用的管理員", {offset: 'rb', shift: 6});
            }


        }

/**
 *  必須要要加上 通過什么來點擊
 */

$('.demoTable .layui-btn').on('click', function () {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
});

});

Java 后台代碼

/**
 * 批量禁用管理員
 *
 * @param adminInfoCode
 * @param adminInfoId
 * @return
 */
@RequestMapping("admin/updateAdminInfoCodeClose")
public ResultFormat updateAdminInfoCodeDn(Integer adminInfoCode, @RequestParam(value = "adminInfoId[]") Integer[] adminInfoId) {

    logger.info("adminInfoCode = {}", adminInfoCode);
    logger.info("adminInfoId = {}", adminInfoId);
    Integer flag = 0;

    for (Integer integer : adminInfoId) {
        map.put("adminInfoId", integer.intValue());
        map.put("adminInfoCode", adminInfoCode);
        flag = adminService.updateAdminInfo(map);
    }

    logger.info("flag = {}", flag);
    if (flag > 0) {
        return ResultUtil.success(flag);
    }

    return ResultUtil.error(104, "更新失敗..");
}

源碼碼雲地址 ：
https://gitee.com/pig_farmer_x/springboot/tree/master/