精华内容
下载资源
问答
  • Layui学习

    2020-12-14 09:04:08
    Layui是一个前端框架,主要学习如何使用框架即有的功能来快速开发我们的系统。Layui是一个功能很强大的前端框架,有专业的样式,有强大的交互功能,通过官网的API和实例的学习,可以很轻松的开发出专业的前端页面。 ...

    Layui学什么

    Layui是一个前端框架,主要学习如何使用框架即有的功能来快速开发我们的系统。Layui是一个功能很强大的前端框架,有专业的样式,有强大的交互功能,通过官网的API和实例的学习,可以很轻松的开发出专业的前端页面。
    对于信息管理项目,重点学习form表单和表格两大块,form表单中的校验功能比较重要,表格中学习如何设置表格样式、数据列的指定和各按钮的事件。

    展开全文
  • LayUI学习

    2021-07-01 08:05:15
    1.官网:https://www.layui.com/doc/ ...layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览...

    目录

    前言

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

    展开全文
  • layui学习

    2019-04-25 08:30:00
    layui代码生成器 https://9499574.github.io/layui-form-create/ layui界面生成器 http://layuiout.magicalcoder.com/magicaldrag-admin/drag 官方站点 https://www.layui.com/ 我们使用的后台扩展框架 ...

    layui代码生成器

    https://9499574.github.io/layui-form-create/

     

    layui界面生成器

    http://layuiout.magicalcoder.com/magicaldrag-admin/drag

     

    官方站点

    https://www.layui.com/

     

    我们使用的后台扩展框架

    https://gitee.com/lovetime/WeAdmin

    转载于:https://www.cnblogs.com/littlehb/p/10766218.html

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,559
精华内容 2,623
关键字:

layui学习