目录
前言
随着各种快速开发框架的产生,如jeeplus,它所使用的就是layui,本文主要就笔者在学习layui框架中遇到的问题进行记录。
一、layui是什么?
1.官网:https://www.layui.com/doc/
layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。它不需要使用者掌握大量的前端知识,只需要知道js以及css的基本使用就可以,它可以适用于快速开发如jeeplus等,也可以被用于作为小型的web管理系统开发及毕业设计。
2.目录结构
├─css //css目录
│ │─modules //模块 css 目录(一般如果模块相对较大,我们会单独提取,如下:)
│ │ ├─laydate
│ │ └─layer
│ └─layui.css //核心样式文件
├─font //字体图标目录
└─layui.js //核心库
二、使用步骤
1.引入库
可以通过npm,github或者码云进行下载,详情见官网(个人在使用官网给的UNPKG不是很好用,建议使用https://www.layuicdn.com/)
npm引入
npm i layui
layuiCDN引入
2.使用layui结合jquery通过多选框动态生成输入框
xm-select:https://maplemei.gitee.io/xm-select/#/component/install
始于 layui 的一个多选解决方案。
前身 formSelects, 由于渲染速度慢, 代码冗余, 被放弃了
xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展
注意:数据自己设定,详见xm-select官网,官网使用axios进行数据交互,本文使用基于jquery的ajax进行数据交互,思路一样。
<div id="demo1" class="xm-select-demo"></div>
<button type="button" class="layui-btn layui-btn-normal" id="demo1-getValue">确定</button>
<button type='button' class='layui-btn layui-btn-danger' id='clear_btn' onclick='clearbtn()'>清空</button>
<pre id="demo1-value"></pre>
<div class="layui-form-item" id="input_add" style="border: #000000 1px solid;"></div>
<div class="layui-form-item">
<hr/>
<label class="layui-form-label">使用天数</label>
<div class="layui-input-block">
<input type="text" name="title" id="days" lay-verify="title" autocomplete="off" placeholder="请输入使用天数" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">使用缘由</label>
<div class="layui-input-block">
<input type="text" name="title" id="reason" lay-verify="title" autocomplete="off" placeholder="请输入使用原因" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="submit_btn">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</table>
<script>
let userId;
let userName;
let deptId;
let selectArr;
let click_count = 0;
var demo3 = xmSelect.render({
el: '#demo1',
language: 'zn',
tips: '请选择需要的设备',
toolbar: {show: true},
data: []
})
$.ajax({
type : "GET",
url : "",
dataType: "json",
contentType : "application/json;charset=utf-8",
success : (function(res) {
console.log("data",res.data);
demo3.update({
data: res.data,
autoRow: true
})
}
),
error: (function (err) {
alert("调用getUserInfo失败 err为:" + JSON.stringify(err));
}),
});
}
function clearbtn() {
$('#img_upload').empty();
}
document.getElementById('demo1-getValue').onclick = function(){
//获取当前多选选中的值
// var count = demo1.get
selectArr = demo3.getValue();
console.log(selectArr[0].name);
console.log(selectArr.length);
var number = selectArr.length;
if(click_count == 0) {
click_count ++;
for (let i =0;i<=number;++i){
$("<p> </p>").appendTo($('#input_add'));
$("<label class='layui-form-label' id='preview_"+i+"'>"
+selectArr[i].name+
": </label>").appendTo($('#input_add'));
$("<div class='layui-input-block'><input tableindex='1' onblur='myfunction(this.id)' type='number' autocomplete='off' placeholder='请输入申请的设备数量' id='device_"+i+
"' class='layui-input'/><div id = 'mention'><span id='devNum_"+i+"'>当前设备数量:"+selectArr[i].devNum+"</span></div><span id = 'remark_"+i+"'></span</div></p> ").appendTo($('#input_add'));
}
} else {
$('#img_upload').empty();
for (let i =0;i<=number;++i){
$("<p> </p>").appendTo($('#input_add'));
$("<label class='layui-form-label' id='preview_"+i+"'>"
+selectArr[i].name+
": </label>").appendTo($('#input_add'));
$("<div class='layui-input-block'><input onblur='myfunction(this.id)' type='number' autocomplete='off' placeholder='请输入申请的设备数量' id='device_"+i+
"' class='layui-input'/><div id = 'mention'><span id='devNum_"+i+"'>当前设备数量:"+selectArr[i].devNum+"</span></div><span id = 'remark_"+i+"'></span></div>").appendTo($('#input_add'));
}
}
}
3.使用layui.table实现数据加载
table 模块是我们的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。尽管如此,我们仍将对其进行完善,在控制代码量和性能的前提下,不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。——LayUI官网转载
在一个表格内加载多个对象实现。
部分内容在这位大佬的博客中学习:https://www.cnblogs.com/yehuisir/p/13969484.html
基本数据结构
{
"code": 0,
"data": [
{
"instanceId": "434adfe6-ac99-4db2-a9eb-75c783deed6d",
"numVoList": [
{
"deviceName": "设备一",
"deviceNum": "5"
},
{
"deviceName": "设备二",
"deviceNum": "5"
},
{
"deviceName": "设备四",
"deviceNum": "18"
}
],
"deviceReason": "test",
"createTime": "2021-07-01",
"overTime": "2021-07-04",
"useDays": "3",
"examineState": "agree",
"userId": "683817040138873532",
"deptId": "469387298"
}
]
}
效果图
代码实现:
1.引入layui库
<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css">
<script src="https://heerey525.github.io/layui-v2.4.3/layui/layui.js"></script> <!-- jQuery 3 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
2.引入layUI-table基本代码
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
<button class="layui-btn layui-btn-sm" onclick="returnPage()">返回审批页面</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="finishEvent">完成任务</a>
<a class="layui-btn layui-btn-xs" lay-event="delayEvent">任务延期</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancelEvent">取消任务</a>
</script>
3.设置逻辑
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'设置自己的数据url'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'instanceId', title:'审批实例ID', width:150, fixed: 'left', unresize: true, sort: true,align:'center'}
,{field:'deviceReason', title:'审批实例名称', width:120,align:'center'}
,{field:'numVoList', title:'设备名称/数量', width:150, align: 'center',templet: function (d) { console.log(d.numVoList); return getOrderItemInfo(d.numVoList); }}
,{field:'createTime', title:'项目开始时间', width:100,align:'center'}
,{field:'overTime', title:'项目预计结束时间', width:100,align:'center'}
,{field:'useDays', title:'持续时间', width:80, sort: true,align:'center'}
,{field:'examineState', title:'审批状态', width:120,align:'center'}
,{field:'userId', title:'用户id', width:150, sort: true,align:'center'}
,{field:'deptId', title:'公司id', width:130, sort: true,align:'center'},
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:230,align:'center'}
]],done: function(res, curr, count){
$(".layui-table-main tr").each(function (index, val) {
$($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
$($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
})
}
,page: true
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了:'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data.numVoList;
var instanceId = obj.data.instanceId;
console.log(instanceId)
switch(obj.event){
case 'finishEvent':
layer.confirm('请确定任务已经完成',function(){
var code = "1";
updateDeviceSum(data,instanceId,code);
layer.closeAll('dialog');
})
break;
case 'delayEvent':
layer.confirm('延迟任务',function(){
var code = "2";
updateDeviceSum(data,instanceId,code);
layer.closeAll('dialog');
})
break;
case 'cancelEvent':
layer.confirm('真的要取消任务吗',function(){
var code = '-1';
updateDeviceSum(data,instanceId, code);
layer.closeAll('dialog');
});
break;
}
});
});
window.onload = function() {
$.ajax({
type : "GET",
url : "设置自己的后端url",
dataType: "json",
contentType : "application/json;charset=utf-8",
success : (function(res) {
}
),
error: (function (err) {
alert("调用getUserInfo失败 err为:" + JSON.stringify(err));
}),
});
}
4.实现在同一表格框中加载多个数据对象
4.1
//1.设置css将表格行高设置为自适应
<style type="text/css">
.layui-table-cell {
height: auto;
}
</style>
//2.引入行高代码
,done: function(res, curr, count){
$(".layui-table-main tr").each(function (index, val) {
$($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
$($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
})
}
//3.数据拼接
function getOrderItemInfo(objArry) {
var strHtml = "<div>";
$.each(objArry, function (i, ele) {
strHtml += ele.deviceName + " :" + ele.deviceNum + "<br/>";
})
strHtml += "</div>";
return strHtml;
}
总结
通过学习layui框架,提高了我个人的编码效率,以上是我在使用layUI时所遇到的一些困难,依次共勉,希望能对自己有所帮助,靡不有初,鲜克有终,每天一小步,加油