layui小功能整理

标签：title   rip   post   log   add   开始   shelf   单元格   store   

一、数据表格

1.添加序号：type类型定义为numbers

        <th lay-data="{width:‘5%‘,type:‘numbers‘,fixed:‘left‘}">序号</th>

2.添加排序：添加sort属性sort:true

        <th lay-data="{width:‘8%‘,field:‘stock‘,sort: true,align:‘center‘}">库存</th>

3.单元格可编辑：添加edit:‘stock‘,并监听单元格编辑事件

        <th lay-data="{width:‘8%‘,field:‘stock‘,sort: true,align:‘center‘,edit:‘stock‘}">库存</th>

            //监听单元格编辑
            table.on(‘edit(bookShelf)‘, function(obj){
                var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
                layer.msg(‘[ID: ‘+ data.id +‘] ‘ + field + ‘ 字段更改为：‘+ value);
            });

4.开启分页：table属性上的lay-data增加属性page:true

    <table class="layui-table" lay-data="{ url:‘${basePath!}/bookShelf/list‘, page:true, id:‘bookShelfTable‘}" lay-size="sm"
           lay-filter="bookShelf">
    </table>

5.单元格自定义样式：templet属性

        <th lay-data="{width:‘6%‘,field:‘status‘,align:‘center‘,templet:‘#status‘}">状态</th>

    <script type="text/html" id="status">
        {{# if(d.status === ‘启用‘){}}
        <span style="color: #3cc51f;">{{ d.status }}</span>
        {{# }else{}}
        <span style="color: #f43530;">{{ d.status }}</span>
        {{#  } }}
    </script>

6.固定列：fixed:‘right‘，固定在列表右边

        <th lay-data="{fixed: ‘right‘, width:‘18%‘, align:‘center‘, toolbar: ‘#barDemo‘}">操作</th>

7.单元格事件：event:‘checkQrCode‘，添加监听单元格事件（同以下8事件一起监听）

        <th lay-data="{width:‘18%‘,field:‘qr_code‘,align:‘center‘,event:‘checkQrCode‘}">二维码</th>

8.数据操作：

        <th lay-data="{fixed: ‘right‘, width:‘18%‘, align:‘center‘, toolbar: ‘#barDemo‘}">操作</th>

    <script type="text/html" id="barDemo">
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </script>

            //监听工具条
            table.on(‘tool(bookShelf)‘, function (obj) {
                var data = obj.data;
                var id = data.id;
            if (obj.event === ‘edit‘) {}
                else if (obj.event === ‘del‘) {
                    
                }else if (obj.event ===‘checkQrCode‘){
                    //点击事件的操作
                }
            });

9.执行表格重载

                //执行重载
                table.reload(‘bookShelfTable‘, {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: { //查询参数
                        searchKey: searchKey,
                        storeId: storeId
                    }
                });

10.设置初始排序 table中lay-data增加initSort属性，要定义为初始排序的th上定义sort:true

    <table class="layui-table" lay-data="{ url:‘${basePath!}/bookShelf/list‘, page:true, id:‘bookShelfTable‘,initSort: {field:‘createTime‘, type:‘desc‘}}" lay-size="sm"
           lay-filter="bookShelf">
        <thead>
        <tr>
            <th lay-data="{width:‘12%‘,field:‘createTime‘,sort: true,align:‘center‘}">创建时间</th>
        </tr>
        </thead>
    </table>

二、弹出层

1.弹出窗口，居中显示，长宽自定义

            layer.open({
                        type: 2,
                        anim: 1,
                        title: "编辑书架",
                        area: [‘40%‘, ‘90%‘],
                        btn: [‘保存‘, ‘关闭‘],
                        yes: function (index, layero) {
                           //点击保存的回调
                        },
                        content: [‘${basePath!}/bookShelf/toEdit/‘ + id, ‘yes‘]
                    });

2.弹出询问框

                    layer.confirm(‘真的删除行么‘, function (index) {
                        $.ajax({
                            url: "${basePath!}/bookShelf/delete/" + id,
                            dataType: ‘json‘,
                            type: ‘DELETE‘,
                            success: function () {
                                obj.del();
                                layer.msg("删除成功");
                                layer.close(index);
                            },
                            error: function (result) {
                                layer.alert(result.message, {
                                    icon: 5,
                                    skin: ‘layer-ext-moon‘
                                })
                            }
                        });
                    });

3.弹出消息框

          layer.msg(msg, {
            time: 2000, //2s后自动关闭
            btn: [‘明白了‘, ‘知道了‘, ‘哦‘]
          });

三、文件上传

1.自动上传

    <button type="button" class="layui-btn" id="uploadShelf"><i class="layui-icon"></i>上传书架信息</button>

            //文件上传
            upload.render({
                elem: ‘#uploadShelf‘,
                url: ‘${basePath!}/bookShelf/upload‘,
                accept: ‘file‘,
                exts: ‘xls|xlsx‘,
                method: ‘post‘,
                done: function (res, index, upload) {
                    var msg = res.message;
                    layer.msg(msg,{time: 1000});
                    table.reload(‘idTest‘, {});
                }
            });

2.不自动上传

    <div class="layui-upload">
      <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
      <button type="button" class="layui-btn" id="test9">开始上传</button>
    </div>

      //选完文件后不自动上传
      upload.render({
        elem: ‘#test8‘
        ,url: ‘/upload/‘
        ,auto: false
        //,multiple: true
        ,bindAction: ‘#test9‘
        ,done: function(res){
          console.log(res)
        }
      });

四、表单

    <form id="editItemForm" class="layui-form" style="margin-top: 20px;margin-right: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">所属店铺</label>
            <div class="layui-input-block">
                <select id="itemStoreSelect" name="storeId" lay-verify="required" lay-search="" onchange="changeItem();">
                    <option value="" selected>请选择店铺信息</option>
                    <c:forEach var="store" items="${storeList}">
                        <c:if test="${store.id ==storeId}">
                            <option value="${store.id}" selected>${store.name}</option>
                        </c:if>
                        <c:if test="${store.id !=storeId}">
                            <option value="${store.id}">${store.name}</option>
                        </c:if>
                    </c:forEach>
                </select>
            </div>
        </div>
     
        <div class="layui-form-item">
            <label class="layui-form-label">搜索关键字</label>
            <div class="layui-input-block">
                <input type="text" id="searchKey" placeholder="商品名称 / 条码 / 编号" class="layui-input" value="${searchKey}"/>
            </div>
        </div>
     
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <select id="itemSelect" name="barcode" lay-verify="required" lay-search="">
                    <c:if test="${barcode != ‘undefined‘}">
                        <option value="${barcode}" selected>${barcode}</option>
                    </c:if>
                </select>
            </div>
        </div>
     
     
        <div class="layui-form-item">
            <label class="layui-form-label">RFID</label>
            <div class="layui-input-block">
                <input type="text" name="rfid" class="layui-input" readonly="readonly" value="${rfid}">
            </div>
        </div>
     
     
        <div class="layui-form-item">
            <label class="layui-form-label">是否支付</label>
            <div class="layui-input-block">
                <input type="radio" name="payStatus" value="0" title="未支付" <c:if test="${payStatus==0}">checked=""</c:if>>
                <input type="radio" name="payStatus" value="1" title="已支付" <c:if test="${payStatus==1}">checked=""</c:if>>
            </div>
        </div>
     
    </form>

以上功能的代码展示：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>书架管理</title>
        <link rel="stylesheet" href="${basePath!}/static/layui/css/layui.css">
        <script src="${basePath!}/static/layui/jquery-3.3.1.min.js"></script>
        <script src="${basePath!}/static/layui/jquery.qrcode.min.js"></script>
    </head>
    <body>
    <div>
        <button type="button" id="addBookShelf" class="layui-btn"><i class="layui-icon"></i>新增书架</button>
        <button type="button" class="layui-btn" id="uploadShelf"><i class="layui-icon"></i>上传书架信息</button>
    </div>
    <table class="layui-table" lay-data="{ url:‘${basePath!}/bookShelf/list‘, page:true, id:‘bookShelfTable‘,initSort: {field:‘createTime‘, type:‘desc‘}}" lay-size="sm"
           lay-filter="bookShelf">
        <thead>
        <tr>
            <th lay-data="{width:‘5%‘,type:‘numbers‘,fixed:‘left‘}">序号</th>
            <th lay-data="{width:‘14%‘,field:‘name‘,align:‘center‘}">书架名称</th>
            <th lay-data="{width:‘8%‘,field:‘code‘,sort: true,align:‘center‘}">编号</th>
            <th lay-data="{width:‘18%‘,field:‘qr_code‘,align:‘center‘,event:‘checkQrCode‘}">二维码</th>
            <th lay-data="{width:‘8%‘,field:‘stock‘,sort: true,align:‘center‘,edit:‘stock‘}">库存</th>
            <th lay-data="{width:‘15%‘,field:‘address‘,align:‘center‘}">地址</th>
            <th lay-data="{width:‘6%‘,field:‘status‘,align:‘center‘,templet:‘#status‘}">状态</th>
            <th lay-data="{width:‘12%‘,field:‘createTime‘,sort: true,align:‘center‘}">创建时间</th>
            <th lay-data="{width:‘12%‘,field:‘updateTime‘,sort: true,align:‘center‘}">最后更新时间</th>
            <th lay-data="{fixed: ‘right‘, width:‘18%‘, align:‘center‘, toolbar: ‘#barDemo‘}">操作</th>
        </tr>
        </thead>
    </table>
    <script type="text/html" id="barDemo">
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </script>
    <script type="text/html" id="status">
        {{# if(d.status === ‘启用‘){}}
        <span style="color: #3cc51f;">{{ d.status }}</span>
        {{# }else{}}
        <span style="color: #f43530;">{{ d.status }}</span>
        {{#  } }}
    </script>
    <script src="${basePath!}/static/layui/layui.js"></script>
    <script>
        //JavaScript代码区域
        layui.use([‘layer‘, ‘table‘, ‘form‘, ‘element‘, ‘upload‘], function () {
            var layer = layui.layer;
            var element = layui.element;
            var table = layui.table;
            var form = layui.form;
            var $ = layui.$;
            var upload = layui.upload;
            //新增按钮点击事件
            $("#addBookShelf").on(‘click‘, function () {
            });
            //文件上传
            upload.render({
                elem: ‘#uploadShelf‘,
                url: ‘${basePath!}/bookShelf/upload‘,
                accept: ‘file‘,
                exts: ‘xls|xlsx‘,
                method: ‘post‘,
                done: function (res, index, upload) {
                    var msg = res.message;
                    layer.msg(msg,{time: 1000});
                    table.reload(‘idTest‘, {});
                }
            });
            //监听单元格编辑
            table.on(‘edit(bookShelf)‘, function(obj){
                var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
                layer.msg(‘[ID: ‘+ data.id +‘] ‘ + field + ‘ 字段更改为：‘+ value);
            });
            //监听工具条
            table.on(‘tool(bookShelf)‘, function (obj) {
                var data = obj.data;
                var id = data.id;
                if (obj.event === ‘edit‘) {
                    layer.open({
                        type: 2,
                        anim: 1,
                        title: "编辑书架",
                        area: [‘40%‘, ‘90%‘],
                        btn: [‘保存‘, ‘关闭‘],
                        yes: function (index, layero) {
                           //点击保存的回调
                        },
                        content: [‘${basePath!}/bookShelf/toEdit/‘ + id, ‘yes‘]
                    });
                }
                else if (obj.event === ‘del‘) {
                    layer.confirm(‘真的删除行么‘, function (index) {
                        $.ajax({
                            url: "${basePath!}/bookShelf/delete/" + id,
                            dataType: ‘json‘,
                            type: ‘DELETE‘,
                            success: function () {
                                obj.del();
                                layer.msg("删除成功");
                                layer.close(index);
                            },
                            error: function (result) {
                                layer.alert(result.message, {
                                    icon: 5,
                                    skin: ‘layer-ext-moon‘
                                })
                            }
                        });
                    });
                }else if (obj.event ===‘checkQrCode‘){
                    //点击事件的操作
                }
            });
        });
    </script>
    </body>
    </html>

layui小功能整理

标签：title   rip   post   log   add   开始   shelf   单元格   store   

原文地址：https://www.cnblogs.com/zhangfu/p/10336682.html