layui小功能整理

layui官方文档做的特别详细，能够很容易的上手使用，这里只记录下我常用的功能。

一、数据表格

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>

页面展示图示：