目录
前言
随着各种快速开发框架的产生，如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时所遇到的一些困难，依次共勉，希望能对自己有所帮助，靡不有初，鲜克有终，每天一小步，加油
1380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
