Layui的基础用法

个人使用Layui的记录

Layui使用表格

HTML代码：
注意：其中的lay-filter是要与表格的一些点击事件绑定的，不可忘记填写。

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

        <div class="layui-form layui-card-header layuiadmin-card-header-auto layui-search">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        <button class="layui-btn layui-btn-sm" id="account"
                                type="button">
                            批量结算
                        </button>
                    </label>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">
                        总交易金额：
                        <span style="color: #1E9FFF"><span id="productMoneySum">0</span> 元</span>
                    </label>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">
                        金额：
                        <span style="color: #1E9FFF"><span id="couponMoneySum">0</span> 元</span>
                    </label>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">请输入店铺：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="entpName" type="text" name="entpName" placeholder="请输入店铺名称"
                               class="layui-input"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">请选择时间：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="effective_date" type="text" name="effective_date_range"
                               placeholder="请选择时间" class="layui-input" readonly="readonly"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-sm layuiadmin-btn-list" id="search" data-type="reload"
                            type="button">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-sm layuiadmin-btn-list" lay-submit id="export" type="button">
                        导出
                    </button>
                </div>
            </div>
        </div>
     </div>
</div>

Jquery代码：

layui.use(['table', 'laydate'], function () {
        var table = layui.table;
        var layer = layui.layer;
        table.render({
            elem: "#test",
            url: url + "?method=getCoupongroupPaymentList",
            page: true,
            id: "audit",
            parseData: function (res) {
                $("#xxx").text(res.xxx);
                $("#xxx").text(res.xxx);
                return {
                    "count": res.count,
                    "msg": res.msg,
                    "code": res.code,
                    "data": res.data
                }
            },
            cols: [[
                {type: 'checkbox', align: 'center', width: 80},
                {
                    field: 'xxx',
                    title: 'xxx',
                    align: 'center',
                    width: 210,
                    templet: '<div>{{d.xxx}}</div>'
                },
                {field: 'xxx', title: 'xxx', align: 'center', width: 125},
                {field: 'xxx', title: 'xxx', align: 'center', width: 130},
                {
                    field: 'xxx',
                    title: 'xxx',
                    align: 'center',
                    width: 180,
                    templet: '<div>{{layui.laytpl.toDateString(d.xxx,"yyyy-MM-dd HH:mm:ss")}}</div>'
                },
                {
                    field: 'xxx',
                    title: 'xxx',
                    align: 'center',
                    width: 180,
                    templet: '<div>{{layui.laytpl.toDateString(d.xxx,"yyyy-MM-dd HH:mm:ss")}}</div>'
                },
                {
                    field: 'xxx',
                    title: 'xxx',
                    align: 'center',
                    width: 180,
                    templet: '<div>{{layui.laytpl.toDateString(d.xxx,"yyyy-MM-dd HH:mm:ss")}}</div>'
                },
                {field: 'xxx', title: 'xxx', align: 'center', width: 200, templet: '#start'},
                {field: 'xxx', title: 'xxx', align: 'center', width: 200, templet: '#coupongroupApproval'},
            ]]
        });

上述代码中field对应的是后端返回数据中的字段名；title对应的是表格的列头；parseData是将换回来的数据进行手动解析的方法，在这儿你可以拿到除表格以外的其它数据进行页面的渲染；其中的templet是引用处理数据的一些代码块，以及处理时间格式的代码，下面暂时他们。

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail" data-type="reload2">查看明细</a>
</script>

上面这个代码块是table行内的一个按钮，在该按钮中需要注laye-vent=“detail” data-type="reload2"这两个属性的设置，他们两个是做点击事件时区分各个按钮的重要标志。对于laye-event可以通过点击对象.event获取到，而对于添加了data-type的a标签需要通过$(this).data(‘type’)获取。

对于行内点击事件的例子：

       //监听行工具事件
        table.on('tool(test)', function (obj) {
            if (obj.event === 'detail') {
                console.log($(this))
                var type = $(this).data('type');
                console.log(type);
                entpName = obj.data.entpName;
                active[type] ? active[type].call(this) : '';
            }
        });

其中的test对应的是table标签的lay-filter，其中active[type]这样的写法是为了根据标签的data-type属性调用active中对应的方法。

<script type="text/html" id="start">
    {{#
    if(d.xxx == '1'){ }}
    <div style="color: #F6B044">审核中</div>{{#  }
    if(d.xxx == '2'){ }}
    <div style="color: #F53732">初审拒绝</div>{{#  }
    if(d.xxx == '3'){ }}
    <div style="color: #F6B044">待拨付</div>{{#  }
    if(d.xxx == '4'){ }}
    <div style="color: #5FBCFF">已拨付</div>{{#  }
    }}
</script>

在使用表格的时候会遇到表格要根据查询条件的不同重新加载新数据的情况，那么这时候就需要使用到表格的重载。

//表格重载
        var $ = layui.$, active = {
            reload: function () {
                var selectName = $("#entpName").val();
                var selectDate = $("#effective_date").val();
                table.reload('audit', {
                    page: {
                        curr: 1
                    },
                    where: {
                        selectName: selectName,
                        selectDate: selectDate
                    }
                });
            },
            offset: function (obj) {
                layer.open({
                    type: 1
                    , title: '请填写'
                    , offset: 'auto'
                    , id: 'layerDemo' + 'auto' //防止重复弹出
                    , content: $("#message")
                    , anim: 2
                    , scrollbar: false
                    , area: ['60%', '310px']
                    , shadeClose: true
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                });
            }
        };

其中reload是表格重载的方法，'audit’对应的是table.render中的id，curr: 1的意思是从第一页开始，where是重载时在原路径上要拼接的参数。offset方法对应的是一个弹出框（页面级）它在content上使用的另个代码块作为弹出的主要内容。

<form class="layui-form" action="" id="message">
        <div class="layui-form-item layui-form-text" style="margin-right: 10px">
            <label class="layui-form-label">驳回理由</label>
            <div class="layui-input-block">
                <textarea name="textarea" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="padding-top: 10px">
            <label class="layui-form-label">上传附件</label>
            <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="btn" id="testList">选择文件</button>
                        <button type="button" class="btn" id="testListAction">开始上传</button>
                        <button lay-submit="" lay-filter="demo2" class="btn" id="submit" style="float: right;margin-right: 10px">提交</button>
                        <div class="layui-upload-list" style="padding-right: 10px">
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th style="text-align: center">文件名</th>
                                    <th style="text-align: center">大小</th>
                                    <th style="text-align: center">状态</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody id="demoList"></tbody>
                            </table>
                        </div>
                    </div>
            </div>
        </div>
    </form>

对于form表单的提交事件的监听：

form.on('submit(demo2)', function (data) {
            var textarea = data.field.textarea;
            var filePath = data.field.file;
            $.ajax({
                url: url + "?method=auditReject",
                data: "id=" + id2 + "&textarea=" + textarea + "&filePath=" + filePath,
                dataType: "json",
                success: function (data) {
                    layer.closeAll('page');
                    table.reload('audit', {
                        page: {
                            curr: 1
                        }
                    }, 'data');
                    if (data.code == 1) {
                        layer.msg(data.msg, {icon: "1"});
                    } else {
                        layer.msg(data.msg, {icon: "2"});
                    }
                },
                error: function () {

                }
            });
            return false;
        });

其中的demo2是标签的lay-filter对应的属性；layer.closeAll(‘page’);是关闭所有页面级弹出框的语句。

文件上传的例子：

        //多文件列表示例
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: '${ctx}/upload.do?dir=file' //改成您自己的上传接口
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td style="text-align: center">'+ file.name +'</td>'
                        ,'<td style="text-align: center">'+ (file.size/1024).toFixed(1) +'kb</td>'
                        ,'<td style="text-align: center">等待上传</td>'
                        ,'<td style="text-align: center">'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                if(res.ret==1){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    var file_path = res.url;
                    //alert(id2);
                    $.ajax({
                        type:"post",
                        url:url+"?method=saveFilePath",
                        data:"file_path="+file_path+"&id="+id2,
                        success:function (data) {
                            if (data.code == 1) {
                                layer.msg(data.msg, {icon: "1"});
                            } else {
                                layer.msg(data.msg, {icon: "2"});
                            }
                        },
                        error:function () {

                        }
                    });
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }else {
                    layer.msg(res.msg,{icon:"2"});
                    this.error(index, upload);
                }
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

HTML代码：

<div class="layui-form-item" style="padding-top: 10px">
            <label class="layui-form-label">上传附件</label>
            <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="btn" id="testList">选择文件</button>
                        <button type="button" class="btn" id="testListAction">开始上传</button>
                        <button lay-submit="" lay-filter="demo2" class="btn" id="submit" style="float: right;margin-right: 10px">提交</button>
                        <div class="layui-upload-list" style="padding-right: 10px">
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th style="text-align: center">文件名</th>
                                    <th style="text-align: center">大小</th>
                                    <th style="text-align: center">状态</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody id="demoList"></tbody>
                            </table>
                        </div>
                    </div>
            </div>
        </div>