欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui小功能整理

程序员文章站 2022-04-29 08:50:57
...

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>

页面展示图示:

layui小功能整理

相关标签: layui