layui
关注
分享
扫一扫
文章平均质量分 51
黄宝康
这个作者很懒，什么都没留下…
展开
-
layui 表单页面代码
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimu原创 2017-10-19 09:19:46 · 2509 阅读 · 0 评论 -
layui日期时间段的设置，开始时间-结束时间
&lt;div class="layui-row"&gt; &lt;div class="layui-col-md8 layui-col-md-offset3 bo ttt"&gt; &lt;label class="layui-form-label" style="width:3原创 2018-06-08 11:31:57 · 21206 阅读 · 2 评论 -
解决Layui选择全部，换页checkbox复选框重新勾选的问题
在项目中发现layui数据表格勾选复选框checkbox的时候，转到新的一页勾选，上一次的勾选不会选中，即没有记忆功能。导致跟后台交互传递参数不全问题。为了解决此问题，我们可以借助缓存，每勾选一个，保存到缓存变量数组中，取消勾选的时候，删除缓存的对应项。<%@ page language="java" contentType="text/html; charset=UTF-8" pa...原创 2018-06-23 14:24:49 · 17365 阅读 · 9 评论 -
laytpl--前端数据绑定
内容转载自https://www.cnblogs.com/Bruke/p/6802015.html 发现一枚前端数据绑定导弹：laytpl,官网：http://www.layui.com/laytpl/为了不用angularJS等较为重量级的，和繁琐的配置，所以就用了laytpl,可以配合JQ使用laytpl.js源码如下：/** @Name：laytpl-v1.1 精妙的...转载 2018-06-27 15:21:36 · 1260 阅读 · 0 评论 -
Layui 导航默认展开和菜单栏选中高亮设置
<ul class="layui-nav layui-nav-tree custom-nav-tree" lay-filter="kitNavbar" kit-navbar> <c:if test="${title_sys eq '内容管理' }"> <li class="lay.原创 2018-06-27 15:44:33 · 21300 阅读 · 0 评论 -
Layui数据表格templet中超链接onclick的参数写法
<script type="text/html" id="barDemo">{{# if(d.PO_TYPE_ID !='631'&&d.PO_TYPE_ID!='931'&&d.PO_TYPE_ID!='932'){ }} <a class="layui-btn layui-btn-danger" onclick="ad原创 2018-08-01 17:52:51 · 9112 阅读 · 0 评论 -
layui 数据表格隐藏列
var tableIns = table.render({ elem: '#test' ,url:'<%=path%>/partyMember/getPartyMembersByOrgCode' , width: '100%' , height: 480 ...原创 2018-08-23 16:42:10 · 9603 阅读 · 0 评论 -
layui数据表格checkbox编辑的时候选中
在编辑的时候，比如说一次活动，有很多参与人，编辑这次活动的时候，参与人以弹窗的形式以layui table展示，这需要参与人勾选中，即所谓的数据回显。以下代码实现了编辑的时候回显，如果是新增的时候，ids为空数组，如果是编辑，则进行初始化，编辑的思路主要是js模拟复选框的click事件，配合layui监听复选框的方法，把需要的数据进行全局缓存存储，实例中主要靠var ids =new ...原创 2018-08-23 16:51:30 · 4395 阅读 · 0 评论 -
Layui中templet中a的onclick参数传递的问题
以下是我的模板，主要用在列表页table中的按钮，点击弹窗展开详情页的功能。<script type="text/html" id="contentTpl"> <a href='javascript:;' class="layui-btn layui-btn-danger layui-btn-xs" onclick='showContent("{{d.CONTE...原创 2018-08-31 15:32:14 · 9255 阅读 · 4 评论 -
layer.confirm点击第一个按钮关闭弹出框
将第一个按钮的回调函数传一个index，然后使用layer.close(“index”)就可以点击第一个按钮的时候关闭弹出框了 layer.confirm(content,{btn:btn, btn1:function(index){ console.log("点击了我知道了"); var id = res.data[0].id; console.log("id...原创 2019-09-25 10:33:47 · 1532 阅读 · 0 评论 -
使用Layui实现数据表格中鼠标悬浮图片放大效果，离开时恢复原图
var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', ...原创 2018-06-14 19:32:06 · 8794 阅读 · 9 评论 -
防止表单重复提交的一种方式
<button id="tijiao" class="layui-btn" lay-filter="demo1" >提交</button>form.on('submit(demo1)', function(data){ $.ajax({ url:'<%=path%>/org/editPo', ..原创 2018-06-07 19:58:14 · 2607 阅读 · 0 评论 -
LayUI中的时间日期控件，设置时间范围，过去的时间不能选择，只能选择未来的时间
默认Layui中的时间控件显示如下：我当时系统时间是2018-06-07，大家可以看到，过去的时间还是能选择的。 考虑到项目需求，很大可能选择日期只能是未来的时间。如：还款日期，发布日期，项目上线时间等。默认显示一个时间框的代码如下：<input type="text" name="publish_date" id="date" lay-verify="date" pl...原创 2018-06-07 11:03:04 · 22480 阅读 · 6 评论 -
layui 表单标签的校验
layui表单元素的校验只需在元素上加入lay-verify，layui提供了以下值。required（必填项）phone（手机号）email（邮箱）url（网址）number（数字）date（日期）identity（身份证）自定义值同时支持多条规则的验证，格式：lay-verify=”验证A|验证B” 如：lay-verify=”required|phone|number” 另外原创 2017-10-19 09:42:04 · 90183 阅读 · 1 评论 -
使用Layui搭建后台管理界面
Layui是一个样式比较丰富艳丽的UI框架，通过自学了相关api文档，自己手工搭建了一个后台管理页面。页面布局是常用的一套，上面是一个logo，左边区域是一个导航，中间是内容tab页，底部是版权信息，好了，看代码吧！<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"原创 2019-08-05 21:56:20 · 62255 阅读 · 25 评论 -
Layui 代码装饰器
code模块通常针对于程序员，它是layui中一个极其轻量的组成。通俗而言，该模块就是对你的pre元素进行一个修饰，从而保证你展现的代码更具可读性。Layui展现代码装饰器的效果非常方便，只需要加载code模块即可，配置简单，也可以在pre元素上增加对应配置属性。<!doctype html><html lang="en"><head> <meta charset="UTF-8">原创 2017-10-23 09:26:27 · 1768 阅读 · 0 评论 -
Layui laytpl模板引擎的学习
在Layui的数据表格里，遍历数据的时候常常使用laytpl模板引擎，自己第一次学习了下laytpl的语法，经过运行，界面呈现出了相关效果。如果数据库中返回的null等字段，在界面上会呈现出undefined,使用三元运算符可以解决，但是碰到复杂的显示，就需要使用laytpl的函数了，函数的定义语法见官网。{{# JavaScript表达式 }}用分隔符加 # 号开头。注意：如果你是想输出一个函数原创 2020-11-30 16:24:55 · 18799 阅读 · 2 评论 -
Layui 的数据表格，在调用Ajax请求后的关闭弹窗和刷新父窗口js
$.ajax({ url:'<%=path%>/content/addJctt', type:'post', dataType:'json',原创 2017-12-26 14:46:55 · 6111 阅读 · 0 评论 -
Layui树形展示顺序问题
问题阐述在项目中，使用Layui展示树形组织架构，碰到了一个问题。刚开始的代码如下：&lt;table class="layui-table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;党组织名称&l原创 2018-03-28 10:45:35 · 4075 阅读 · 0 评论 -
Layui数据表格的宽高问题
在使用Layui数据表格的时候，如果采用固定数值的话，在不同浏览器里显示会有差异，特别是在不同分辨率设备上。针对以此，把width设置直接去掉，貌似解决了我的显示问题。之前固定宽高的情况/*-------table----------------*/ //方法级渲染 var ta...原创 2018-04-16 20:18:34 · 51096 阅读 · 7 评论 -
layui下的图片轮播图效果代码收藏
以下展示在layui table表格列表中展示图片集，并使用layui图片轮播效果。&lt;script&gt;layui.use(['table', 'tree', 'layer','jquery'], function () {//改变宽高 var h = document.body.clientHeight&amp;&amp;document.documentEle...原创 2018-04-24 16:03:42 · 6976 阅读 · 0 评论 -
Layui 数据表格toolbar中使用模板引擎templet，当前系统时间比较问题
在layui数据表格展现中，使用toolbar，由于权限的控制，需要使用templet模板引擎语法进行控制，控制逻辑为只有大于当前时间的记录才能撤销。效果图如下：（当前时间为2018-06-06）即过了当前日期的记录是无法撤销。代码：window.demoTable = table .render({ ...原创 2018-06-06 13:16:42 · 15378 阅读 · 0 评论 -
layui弹出框confirm自定义样式
增加skin参数，自定义皮肤样式。layer.confirm(content,{btn:btn, skin:'hbk-class', area: ['500px', '300px'], btn1:function(index){ console.log("点击了我知道了"); var id = res.data[0].id; co...原创 2019-09-25 11:32:24 · 6674 阅读 · 0 评论