layui中弹出层的两种表达方式

Posted 2021-01-23 a-dong

方式一：

　　定义js中定义html变量

方式二：

　　设置div ：hidden：hidden 布局

数据表格自适应大小：

代码：

<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>