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>
页面展示图示:
上一篇: Python API使用总结代码
下一篇: PHP常量为何可以定义成值变化的表达式?