LAYUI - 技术教程文章

layui table表格 表头与内容列错位问题(只有纵向滚动条的情况)【图】

版本2.4.5问题展示:存在问题:正好错位一个纵向滚动条的宽度 思路:仔细观察th元素及th包裹的子元素div 如下图发现th宽度莫名的就多了5px 我就纳闷了 解决方案:到table.js源码中→搜索 →纵向滚动条宽度,找到了,并按下图修改 解决了解决后效果如下 原文:https://www.cnblogs.com/zhinian-/p/11081282.html

00037-layui 表单有子列表,如何动态新增和保存(弹窗版)?【代码】

表单中有一个接收明细的子列表,html:<div class="layui-col-md12"><div class="layui-card"><div class="layui-card-header" style="background-color: #e6e6e6">接收明细</div><div class="layui-card-body" style="height: 200px;"><table class="layui-hide" id="companyPaperRecordDetailListTable" lay-filter="companyPaperRecordDetailListTable"></table><script type="text/html" id="companyPaperRecordDetailListTable...

layui form表单提交

layui.use([‘form‘], function () { var form = layui.form; //监听提交 form.on(‘submit(formDemo)‘, function (data) { data.field.shstate = 1; //return false; $.ajax({ url: ‘../hwjg_App/hwjgA...

layui 使用【代码】【图】

1.下载后解压如图 2.示例 home.thml代码<!DOCTYPE html><html><!-- head --><head><meta charset="utf-8"><title>layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="../layui/css/layui.css" media="all"><style>body{margin: 10px;}.de...

layui的表单功能【图】

作为一个phper还是非常喜欢这个插件的~虽然在vue的群里面说这个插件好被人怼过。。废话不多说,这次使用到的是layui的表单功能。上次的日历忘记做笔记了非常可惜,大部分其实跟着文档撸就可以,这次表单提交还出了一点点问题。首先是引入layui的文件然后html。这次的问题出现在了红圈位置。因为我跟着文档翻了下他的自定义验证然后写了这段,一直提示未定位。后面发现漏掉了这一段。也就是说,form时间~要写到这个函数里面也就是要...

LayUI分页基于ASP.NET MVC【代码】【图】

---恢复内容开始---今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 https://www.layui.com/doc/modules/table.html 方便你们随时边看我的实例和lay文档其实我写的很简单首先介绍我用到的东西,使用前段模板:layui的table和layui的表单(此处不细提),开发工具:Vs2017,数据库:Sqlserver2008,ORM:EF,框架:ASP.NET ...

layui实现批量导入excal表【代码】

layui实现多文件上传,并直接选中需要上传文件的类型//拖拽上传 upload.render({elem : ‘#import‘,size: 1024, //限制文件大小,单位 KBaccept: ‘file‘, //普通文件field : ‘file‘,acceptMime: ‘application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet‘, // 规定打开文件选择框时,筛选出的文件类型,值为用逗号隔开的 MIME 类型列表。exts: ‘xls|xlsx‘, //允许上传的...

layui更新表格单元格数据口,更新单元格的内容【代码】

//监听工具条table.on(‘tool(edit)‘, function(obj){var data = obj.data;if(obj.event === ‘getinvitation‘){//有个ajax更新,成功后回调函数写下面的更新//同步更新表格和缓存对应的值 obj.update({is_signin_today: ‘1‘,}); }}); 原文:https://www.cnblogs.com/fps2tao/p/9467092.html

LayUI laydate日期选择器自定义 快捷选中今天、昨天 、本周、本月等等【代码】【图】

1. 引入laydata插件  下载 https://blog-static.cnblogs.com/files/zhangning187/laydate.js laydate.js  替换laydate.js,就可以直接使用自定义快捷选中了 2.自定义控件选取值 1laydate.render({2 elem: ‘#freeTimeInput‘, //指定元素 3 range: true,4 trigger: ‘click‘, //采用click弹出 5 value: ‘‘,6 extrabtns: [7 {8 id: ‘today‘,9 ...

layui数据表格跨行自动合并【代码】

1 <!DOCTYPE html>2 <html>3 <head> 4 <meta charset="utf-8">5 <title>合并行</title>6 <link href="layui/css/layui.css" rel="stylesheet" />7 </head>8 <body>9 <div class="box">10 <table class="layui-table" id="test" lay-data="{page:true,limit:50}" lay-filter="test">11 <thead>12 <tr>13 <th lay-data="{field:‘province‘,width:200}"...

Layui数据表格用法【代码】【图】

在这里介绍一下layui数据表格的简单使用,并介绍所踩的坑首先封装一个类,将数据表格所需要的属性封装在这里 1publicclass MsgJson<T> where T:class,new()2 {3//错误提示代号 4publicint code { get; set; }5//错误提示消息 6publicstring msg { get; set; }7//表格中的记录总数 8publicint count { get; set; }9//表格中的所有记录10public IEnumerable<T> data { get; set; } 11 }在Controller中创建一个ActionResult类方...

layui table合计但是未计算的解决【代码】

在项目里table开启合计功能,但是并未进行数据计算,后来发现是field写错了的问题,上代码for(var i = 0; i < that.checkboxAll.data.length; i++) {var $data = that.checkboxAll.data[i];if($data.visible) {const val = $data.value;th.push({ field: val, //field是表格数据列的唯一标识,就是这里之前写错了,导致table合计无法实现title: ‘<span class="layui-icon-tips" layui-tip-data=" ‘ + that.checkboxAll.data[i]...

LayUI表单【代码】

<!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="layui/css/layui.css"></head><body><!-- 你的HTML代码 --><script src="layui/layui.js"></script><form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-i...

使用webapi绑定layui数据表格完整增删查改记录

因为每次给layui数据表格绑定数据或者类似操作的时候 总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正以下是一个完整的数据表格i项目的增删改查案例先来看后台LayuiContext db = new LayuiContext(); Result res = null; #region 分页查询/查询参数为姓名/性别/班级 利用if添加判断条件 [HttpGet] public IHttpActionResult StudentList2(int page, int limit, s...

layui form里的select元素动态赋值无效【代码】

需要重新更新渲染下select下拉框使用 form.render(‘select‘); $.ajax({url:url,contentType:"application/json;charset=UTF-8",type:‘GET‘,async:false,success: function (res) {let data=res.results,str1=`<option value="">请选择资产</option>`;data.map((item,index)=>{console.log(item)str1+=`<option value="${item.id}">${item.name}</option>`})$("#quiz2").html(str1);console.log(data);for...

使用layui上传图片【代码】

插入前端代码 jsp<link rel="stylesheet" href="lib/layer/ui/css/layui.css" media="all"><div class="table-box box2"><h3><span>上传图片</span></h3><p class="p1"><a id="photo" class="img"><!-- <img src="images/member_pic1.jpg" /> --></a></p><div class="p2"><script src="lib/jquery/1.9.1/jquery.js"></script><button type="button" class="layui-btn" id="upload"><i class="layui-icon">&#xe67c;</i>上传图片</b...

layui 操作Tab

https://blog.csdn.net/Ldown2014/article/details/101947506 https://fly.layui.com/jie/64039/原文:https://www.cnblogs.com/hzjdpawn/p/13289608.html

layui 的nav导航 事件监控,获取DOM元素

<body > <ul class="layui-nav layui-nav-tree" lay-filter="leftNav"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;"><i class="iconfont">&#xe607;</i>菜单管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" data-url="menu1.html" data-id=‘1‘ data-text="后台菜单"><span class="l-line"></span>后台...

layui穿梭框使用

《说明先引入layui组件框架》<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><c:set var="ctx" value="${pageContext.request.contextPath}" /><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>穿梭框组件</title> <link rel="stylesheet" href="${ctx}/layui/css/layui.css"></head><body> <div id="t...

后台返回数据渲染Layui表格【代码】

1、layui表格数据返回的格式是有限制的,这时候可以自己定义一个类来接收数据库查出来的结果然后再来渲染layui表格,下面自己定义一个类,这个类定义了两个方法publicclass JsonToken {publicint code;public String msg;public Object data;publicint count;publicint pages; //返回数据符合layui需要的数据格式;第一个是状态码,0表示成功,第二个是提示信息,第三个是要返回的数据,第四个是数据的总数量public JsonToken(int c...

layui细节

lay-filter="test" 相当于 layui给元素起的第二个名字 为了点击时间的时候 属性名(test) 在名字为这个名称的元素里面查找对应的属性框现在有两种方式 我试用过的第一种实在页面上展示直接写表格里面的数据无需 写js 在layui封装的方法里面去写layui-data 标签里面直接写js脚本即可,这种方式的弊端就是无法在页面的表格里面输入图片, 还有就是在js页面上面写 我们可以在写每一列的时候 追加 templet 方法即可在页面表格里面输...

00010 - layui 表格table 高度自适应充满页面

var tableIns = table.render({elem:‘#taskOptLogListTable‘,url: ctx+‘/task/taskOptLog/query‘,error:admin.error,cellMinWidth: 80,toolbar: ‘#taskOptLogListTable-toolbar‘,defaultToolbar: [{title: ‘条件过滤‘ //标题,layEvent: ‘searchDiv‘ //事件名,用于 toolbar 事件中使用,icon: ‘layui-icon-search‘ //图标类名},‘filter‘, ‘print‘, ‘exports‘],cols: [[{field:‘userName‘, title: ‘操作人‘, a...

00014-layui 打开多页签tabs 弹窗layer

showRec:function () {var checkStatus = table.checkStatus(‘egressionListTable‘)var recs = checkStatus.data;if(!recs || recs.length!=1){layer.msg(‘请选择一条记录‘);return;}var rec = recs[0];window.formData = rec;var dialog = layer.tab({tab: [ {title: ‘外出信息‘,content: ‘<iframe src="egressionShow.jsp" frameborder="0" scrolling="auto" name="iframe0"></iframe>‘},{title: ‘审核信息‘,content:...

layui-前端框架整体使用实例【代码】

首先说明一下,本人是在公司先接触使用的layui,一个功能需求下来之后是能够完成的,但是在使用过程中对layui没有一个整体的理解,遇到问题不能灵活的变通。趁着假期对layui来一个整体的梳理与理解,有不对的地方希望能指正。同时在理解的时候也上网搜了很多博文,遇到一些好的,在文章中都会记录下来,并给出链接。 参考layui官网(https://www.layui.com/doc/base/infrastructure.html)1.非模块化和模块化的区别是(参考博文:htt...

取消layUI中日期选择控件默认填充日期【图】

input标签中使用日期选择控件填写,加载时默认填充当前日期,标签设置了placeholder="请选择" autocomplete="off",但是并没有效果,最后发现可以在绑定时将value一项设置为空,而非new Data()的值,laydate.render({ elem: ‘#param_monthid‘, type: ‘month‘, format: ‘yyyyMM‘, value: ‘‘, max: year + "年" + month});为什么之前给赋值为new Date了——因为这是别人的代码,原文:https://www.cnblogs....

layui table【代码】

layui table初始化表格var table = layui.table;//转换静态表格 table.init(‘demo‘, {height: 315 //设置高度,limit: 10 //注意:请务必确保 limit 参数(默认:10)是与你服务端限定的数据条数一致//支持所有基础参数 });表格重新加载table.reload(‘idTest‘, {url: ‘/api/table/search‘,where: {} //设定异步数据接口的额外参数//,height: 300 }); 原文:https://www.cnblogs.com/0710whh/p/12450277.html

Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap

转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发。bootstrap:同样基于 jquery ,可同样理解为全方便插件范畴。 Vue.js、Angular.js:属于javascript语言编程范畴。原文:https://www.cnblogs.com/ConfidentLiu/p/10394506.html

layui-执行Ajax提交的时候如何获取表单的元素【代码】

1.一个很简单的属性可以让我们获取表单的元素layui属性data.field, 2.详细使用代码如下 //监听提交form.on(‘submit(add)‘, function (data) {//发送异步,把数据提交给php$.ajax({type: ‘post‘,url: ‘/admin/user‘,dataType: ‘json‘,headers: {‘X-CSRF-TOKEN‘: $(‘meta[name="csrf-token"]‘).attr(‘content‘)},data: data.field,success: function (data) {//弹层提示添加成功,并且刷新父页面if (data.status == 0)...

layui时间闪退解决【图】

原文:https://www.cnblogs.com/java-llp/p/11084744.html

layui实现分页【代码】【图】

一 准备工作首先必须先引入layui的完整目录,也就是你下载下来的整个layui的目录都要放在你的资源文件夹下,也就是这个文件目录 刚开始接触layui的时候,以为和jquery,vue等框架一样,只需要引入相应的js文件和css文件,模快便可以直接使用,因此走了不少的弯路,layui是分模块化的,只有在使用的时候,layui会去modules下找你use的那个模块,或者layui.all.js,但是这两种使用方法不同,一般是引用layui.js和layui.css,在把目录放好之后,接下...