LayUI学习

目录

前言

一、layui是什么?

二、使用步骤

1.引入库

2.使用layui结合jquery通过多选框动态生成输入框

3.使用layui.table实现数据加载

总结


前言


随着各种快速开发框架的产生,如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引入

https://www.layuicdn.com/layui/css/layui.css

https://www.layuicdn.com/layui/layui.js

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>&nbsp;</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>&nbsp;</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时所遇到的一些困难,依次共勉,希望能对自己有所帮助,靡不有初,鲜克有终,每天一小步,加油

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值