xs/public/static/admin/views/development/configure/index.html

<title>配置列表</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>开发选项</cite></a>
        <a><cite>配置管理</cite></a>
        <a><cite>配置列表</cite></a>
    </div>
</div>


<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-formlist">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">配置名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">配置key</label>
                    <div class="layui-input-block">
                        <input type="text" name="key" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">配置分组</label>
                    <div class="layui-input-block">
                        <input type="text" name="group" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn" lay-submit lay-filter="LAY-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn" data-type="add">添加</button>
                <button class="layui-btn layui-btn-normal layuiadmin-btn" data-type="batchreorder">排序</button>
                <button class="layui-btn layui-btn-danger layuiadmin-btn" data-type="batchdel">删除</button>
            </div>

            <script type="text/html" id="isshowTpl">
                <input type="checkbox" lay-skin="switch" lay-text="使用|不使用" lay-filter="setIsshow" value="{{d.id}}" {{ d.isshow== 1 ? 'checked' : '' }}>
            </script>
            <script type="text/html" id="statusTpl">
                <input type="checkbox" lay-skin="switch" lay-text="正常|禁用" lay-filter="setStatus" value="{{d.id}}" {{ d.status== 1 ? 'checked' : '' }}>
            </script>
            <table id="LAY-curd-table" lay-filter="LAY-curd-table"></table>
            <script type="text/html" id="table-curd-list">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>

<script>
    var api_batch = '/manage/system/configure/batch.json'
        , api_list = '/manage/system/configure/list.json'
        , api_del = '/manage/system/configure/del.json'
        , api_change = '/manage/system/configure/change.json'
        , url_add = '/development/configure/add'
        , url_edit = '/development/configure/edit';
    layui.use(['admin', 'table'], function () {
        var $ = layui.$
            , admin = layui.admin
            , table = layui.table
            , form = layui.form;

        table.render({
            elem: '#LAY-curd-table'
            , url: api_list
            ,where:{access_token:layui.data('layuiAdmin').access_token}
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', width: 60, title: 'ID', align: 'center'}
                , {field: 'name', title: '配置名称'}
                , {field: 'key', title: '配置KEY'}
                , {field: 'value', title: '配置值', minWidth: 200}
                , {field: 'group', title: '配置分组', align: 'center', width: 90}
                , {field: 'position', title: '排序序号', edit: 'text', align: 'center', width: 90}
                , {field: 'isshow', title: '生效状态', templet: '#isshowTpl', align: 'center', width: 100}
                , {field: 'status', title: '配置状态', templet: '#statusTpl', align: 'center', width: 100}
                , {title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-curd-list'}
            ]]
            , page: true
            , limit: 30
            , height: 'full-320'
        });

        //监听工具条
        table.on('tool(LAY-curd-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除这条记录么', function (index) {
                    admin.req({
                        url: api_del
                        , data: {id: data.id}
                        , method: 'POST'
                        , success: function (res) {
                            layer.msg('删除成功');
                        }
                    });
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                location.hash = url_edit + '/id=' + data.id;
            }
        });

        //监听搜索
        form.on('submit(LAY-front-search)', function (data) {
            var field = data.field;

            //执行重载
            table.reload('LAY-curd-table', {
                where: field
            });
        });

        //事件
        var active = {
            batchdel: function () {
                var checkStatus = table.checkStatus('LAY-curd-table')
                    , checkData = checkStatus.data; //得到选中的数据

                if (checkData.length === 0) {
                    return layer.msg('请选择数据');
                }
                layer.confirm('确定删除吗？', function (index) {
                    var items = [];
                    layui.each(checkData, function (k, v) {
                        items.push(v.id)
                    });
                    admin.req({
                        url: api_batch
                        , data: {type: 'del', items: items}
                        , method: 'POST'
                        , success: function (res) {
                            table.reload('LAY-curd-table');
                            layer.msg('已删除');
                        }
                    })
                });
            }
            , batchreorder: function () {
                var checkStatus = table.checkStatus('LAY-curd-table')
                    , checkData = checkStatus.data; //得到选中的数据

                if (checkData.length === 0) {
                    return layer.msg('请选择数据');
                }
                var items = [], values = [];
                layui.each(checkData, function (k, v) {
                    items.push(v.id);
                    values.push(v.position)
                });
                admin.req({
                    url: api_batch
                    , data: {type: 'change', items: items, field: 'position', values: values}
                    , method: 'POST'
                    , success: function (res) {
                        table.reload('LAY-curd-table');
                        layer.msg('已更新排序');
                    }
                })
            }
            , add: function () {
                location.hash = url_add
            }
        };

        form.on('switch(setIsshow)', function (obj) {
            admin.req({
                url: api_change
                , data: {field: 'isshow', value: obj.elem.checked ? 1 : 0, id: this.value}
                , method: 'POST'
                , success: function (res) {
                    layer.tips('修改成功', obj.othis);
                }
            })
        });
        form.on('switch(setStatus)', function (obj) {
            admin.req({
                url: api_change
                , data: {field: 'status', value: obj.elem.checked ? 1 : 0, id: this.value}
                , method: 'POST'
                , success: function (res) {
                    layer.tips('修改成功', obj.othis);
                }
            })
        });

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

    });
</script>