<style>

    .btn-container { margin-bottom: 10px; }

    .layui-table-cell .layui-form-checkbox[lay-skin=primary] { top: 5px; }

</style>

<div class="layui-fluid">

    <div class="layui-card">

        <div class="layui-card-header">xx记录</div>

        <div class="layui-card-body">

            <div class="btn-container layui-form">

                <!-- 组别搜索 -->

                <div class="btn-container">

                    <button class="layui-btn layui-btn-normal" onclick="add()">添加xx记录</button>

                </div>

                <table id="table" lay-filter="table" lay-data="{id: table}"></table>

            </div>

        </div>

    </div>

</div>

<div class="layui-card-body" id="record-user" hidden="hidden">

    <div class="layui-form layui-form-pane" lay-filter = 'datafile'>

        <div class="layui-form-item">

            <label class="layui-form-label">xx账号</label>

            <div class="layui-input-inline">

                <select name="xxxx" lay-verify="xxx">

                    <option value="">请选择xx账号</option>

                    {foreach $xxx as $key => $vo}

                    <option value="{$vo.id}">{$vo.xxxx}</option>

                    {/foreach}

                </select>

            </div>

        </div>

        <div class="layui-form-item" >

            <label class="layui-form-label">xx信息</label>

            <div class="layui-input-inline">

                <input type="text" name="xxx" required placeholder="请输入xx信息" class="layui-input">

            </div>

       </div>

    </div>

</div>

<script>

    layui.use(['table', 'form'], function() {

        var table = layui.table;

        var form  = layui.form;

        var tableIns = table.render({

            elem: "#table",

            url: "{:url('xxx')}",

            page: true,
　　　　　　　//这是重点
　　　　　　　cellMinWidth:70,

            done: function(res) {

            },

            cols: [[

                // {type: 'checkbox', fixed: 'left'},

                {field: 'id', title: 'ID', sort: true, align: 'center'},

                {field: 'xx', title: 'xx', sort: true, align: 'center'},

                {field: 'xx', title: 'xx', sort: true, align: 'center'},

                {field: 'xx', title: 'xx', sort: true, align: 'center'},

                {title: '操作', align: 'center', sort: true, templet: '#operation', fixed: 'right'}

            ]]

        });

        // 监听工具栏

        table.on('tool(table)', function(o) {

            var d   = o.data,

                lEv = o.event,

                tr  = o.tr

            if (parseInt('{$xx_power}') != 0) {

                layer.msg('您没有权限操作', { icon: 5, time: 1200 });

                return false;

            }

            if (lEv == 'detail') pop(d);

            if (lEv == 'deleted') deleted(d);

        })

        // 类型搜索

        form.on('select(type)', function(data) {

            search(tableIns);

        });

        $(document).on('click','#seach',function(){

            nameseach(tableIns);

        });

    });

    // 添加

    var add = function() {

        var title = 'xx记录添加'

        layer.open({

            type:1,

            title: title,

            content: $('#record-user'),

            btn:['确定','取消'],

            area:['350px','35%'],

            yes:function(res){

               // 判断输入框是否为空

                if ($('[name=xxx]').val().length == 0)

                {

                    layer.alert('不能存在空的输入框', { icon: 5 });

                    return ;

                }

                var d = {

                    xx: $('[name=xx]').val(),

                    xx: $('[name=xx]').val(),

                    }

                var u = '{:url("xx")}'

                layer.load(2);

                $.post(u, d, function(res) {

                    // 清除弹出层

                    layer.closeAll()

                    if (res.code == 0) {

                        layer.msg('添加成功', {icon: 6, time: 1500}, function() {

                            window.location.reload()

                        })

                        return ;

                    }

                    layer.msg('添加失败', {icon: 5, time: 1500})

                })

            }

        });

    }

    // 修改

    var pop = function(data) {

        var title ='xx编辑'

        var html  = '<div class="layui-form">'

            html += '<div class="layui-form-item" >'

            html += '<label class="layui-form-label">xx账户</label>'

            html += '<div class="layui-input-block">'

            html += '<input type="text" name="xx" required placeholder="xxxxx" class="layui-input" disabled>'

            html += '</div>'

            html += '</div>'

            html += '<div class="layui-form-item">'

            html += '<label class="layui-form-label">xxx</label>'

            html += '<div class="layui-input-inline">'

            html += '<input type="text" name="xx" required placeholder="xxxx" class="layui-input">'

            html += '</div>'

            html += '</div>'

            html += '</div>'

        layer.open({

            title: title,

            content: html,

            yes: function(res) {

                // 判断输入框是否为空

                if ($('[name=xx]').val().length == 0)

                {

                    layer.alert('不能存在空的输入框', { icon: 5 });

                    return ;

                }

                var d = {

                    xxx: $('[name=xxx]').val(),

                    }

                var u = '{:url("xxx")}'

                    d.id = data.id

                layer.load(2);

                $.post(u, d, function(res) {

                    // 清除弹出层

                    layer.closeAll()

                    if (res.code == 0) {

                        layer.msg('修改成功', {icon: 6, time: 1500}, function() {

                            window.location.reload()

                        })

                        return ;

                    }

                    layer.msg('修改失败', {icon: 5, time: 1500})

                })

            }

        });

        // 设置数据

        if (data != null) {

            $('[name=xxxx]').val(data.xxx)

            $('[name=xxx]').val(data.xxx)

        }

    }

    // 删除

    var deleted = function(data) {

        layer.confirm('确认删除该数据?', function() {

            layer.closeAll()

            $.ajax({

                url : "{:url('xxx')}",

                type : "POST",

                data : {

                    'xx' : data.xx,

                },

                dataType : 'json' ,

                success : function(res){

                    console.log(res);

                    if(res.code == 0){

                        layer.msg("删除成功", {icon: 6}, function() {

                            location.reload();

                        });

                    } else{

                        layer.msg("删除失败", {icon: 5});

                    }

                }

            });

        });

    }

</script>

<script type="text/html" id="operation">

    <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>

    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleted">删除</a>

</script>