Layui
关注
分享
扫一扫
杨葱儿
这个作者很懒，什么都没留下…
展开
-
layui表格筛选列不随页面刷新重置
Layui table 自带筛选列的功能，但是这个筛选列会随着页面的刷新重置。用户第二次进入页面或者进行table手工渲染，都会使得筛选项重置。本例利用layui自带的本地储存进行筛选列的数据保存，以达到刷新页面不会重置筛选列的效果。只需要改变引入路径就可以完全运行起来的项目.<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Layui</title&原创 2021-06-24 11:44:51 · 1671 阅读 · 2 评论 -
layui的tab选项卡响应式不显示或者超出宽度无限延伸不折叠问题
解决：layui.element.init();原创 2020-04-10 11:41:50 · 4067 阅读 · 0 评论 -
layui动态数据表格单元格编辑及获取
var TB = '';layui.use('table', function() { var table = layui.table; var urls = '{:U("api/buyer/new_shopcar_goods")}'; //第一个实例 TB = table.render({ elem: '#demo', height: '550px', limits:[1...原创 2019-12-06 15:44:30 · 3742 阅读 · 4 评论 -
layui面包屑导航
面包屑当点击增加一个数据，当回点时，覆盖原有等级的数据<!--导航 tap--><div style="display: flex;justify-content: space-between;padding:0 20px;height: 40px;background: #F0F2F5;line-height: 40px;border-bottom:1px soli...原创 2019-03-22 14:20:30 · 7244 阅读 · 0 评论 -
layui input框列表显示默认历史搜索记录
autocomplete 属性规定输入字段是否应该启用自动完成功能。具体点开链接了解：http://www.w3school.com.cn/tags/att_input_autocomplete.asp<!--关闭默认事件--><input autocomplete="off"> ...原创 2019-04-29 16:11:02 · 4127 阅读 · 0 评论 -
layui 一打开页面就执行弹出框
方法一、<script>layui.use('layer',function(){var layer = layui.layer; layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的String });});</script>方法二、（推荐使...原创 2019-05-09 14:45:43 · 6590 阅读 · 4 评论 -
layui 合计行数据超过2位小数
1.文件位置layui/lay/model/table.js2.修改源代码：var e = t.totalRowText || ""; //ctrl+f找到这一行//增加以下三行代码：if (isNaN(a[n]) == false && parseInt(a[n]) != a[n]) { a[n] = parseFloat(a[n]).toFixed(2)...原创 2019-05-15 15:10:26 · 2511 阅读 · 2 评论 -
layui 合并表格中相邻且字符同的数据（静态表格）
合并表格的【第一列】相同数据：//需要自己引入jq$(function() { $("#table").rowspan(0); //传入的参数是对应的列数从0开始 第一列合并相同 //如果想后面的列也合并，就0,1,2,3依次往后推算});jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 return th...原创 2019-05-14 17:30:34 · 863 阅读 · 0 评论 -
layui 合并表格中相邻且字符同的数据（动态表格）
想要达到以上动态表格合并的动态效果，使用以下方法，但值得注意的是:【layui的js和css一定要最新版本！！！】如想要更精细的合并请参考：https://fly.layui.com/extend/tableMerge1.html<table class="layui-hide" id="demo" lay-filter="demo"></table&g...原创 2019-07-15 17:48:22 · 664 阅读 · 1 评论 -
layui用户注册分步表单
信息来源：https://fly.layui.com/extend/step-lay/需要注意的点儿：在点击1里面的下一步时，会出现点击后直接刷新，不滑动到下一步的情况，需要添加一个type="button"，因为form表单中的button按钮默认type=“submit“，需要自己添加属性才能是button，不然页面会被提交刷新...原创 2019-07-30 17:11:56 · 8907 阅读 · 7 评论 -
layui 图片剪切/截取
文档下载路径：https://fly.layui.com/extend/croppers/左边是可拖动的裁剪区，右边是裁剪后的显示的区域<div class="layui-form-item"> <label>商品图片：(大小500*500)</label> <button type="button" class="layui-btn...原创 2019-07-22 15:18:54 · 5480 阅读 · 2 评论 -
layui监听表单开关后做出询问框
<div class="layui-row" style="margin-top: 6px"> <div class="layui-col-xs12"> <table id="lists" lay-filter="demoEvent"></table> </div></div>cols: [[ //表头 ...原创 2019-07-22 15:46:42 · 478 阅读 · 0 评论 -
layui使用时间选择器后得到值
layui.use('laydate', function(){ var laydate = layui.laydate; //日期时间选择器 laydate.render({ elem: '#test' ,type: 'datetime' ,done: function(value, date, endDate){ alert(v...原创 2019-02-27 10:35:55 · 15985 阅读 · 3 评论 -
layui使用第三方组件流程
例如：treeTable 树形表格。1.在layui官网中找到拓展组件并搜索组件名2.下载组件3.将下载的组件引入到项目文件中，在页面中引入相关.css和.js4.可以看文档...原创 2019-01-16 10:43:37 · 10530 阅读 · 0 评论 -
layui导出所有数据
layui自带的导出，是导出当前页的数据，以下方法是导出所有数据<button class="layui-btn layui-btn layui-btn-warm" onclick="excl_rep()">导出</button> //导出function excl_rep() { var SH=$("#type").val();//汇总分类 v...原创 2019-01-10 13:59:25 · 13753 阅读 · 8 评论 -
layui监听工具栏（操作列表按钮）
<table id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">原创 2019-01-11 11:34:34 · 18055 阅读 · 5 评论 -
layui给下拉框、按钮状态、时间赋初始值
<!--弹框的dom结构--><div id="add_activity"> <div style="width: 95%;height: 100%;margin: auto;"> <form class="layui-form" lay-filter="formTest">原创 2019-01-11 13:38:44 · 5277 阅读 · 0 评论 -
layui表格内放置图片，并点击放大
cols: [[ //表头 { field: 'brand_img_url', title: '图片', sort: true, templet: function(d){ return '<div onclick="show_img(this)" >...原创 2019-01-11 13:47:45 · 14202 阅读 · 5 评论 -
layui表格内文本超出隐藏问题
只需要更改样式即可图片：代码如下.layui-table-cell{ height:auto; overflow:visible; text-overflow:inherit;原创 2019-01-08 15:39:34 · 17821 阅读 · 11 评论 -
layui操作列按钮个数和文字颜色的判断
一、达到的效果如图，通过值去判断是否需要该按钮 cols: [[ //表头 {field: 'money', title: '操作',toolbar: '#barDemos'} ]]<script type="text/html" id="barDemos"> {{# if(d.s_state == 0){ }} <span style="...原创 2019-01-10 10:18:59 · 2402 阅读 · 1 评论 -
layui搜索时显示加载层，有数据后关闭加载层
function ser_on(){ var index = layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 }); TB.reload({ ... done: function (res) { //可二选一 ...原创 2019-01-10 10:29:16 · 2481 阅读 · 0 评论 -
layui的下拉搜索框
html部分通过给select设定属性 lay-search 来开启搜索匹配功能 ，给select父级layui-form的类名，一定要搭配使用才能显示<div class="layui-form-item" style="border-bottom:1px solid #009688;padding: 20px 10px;"> <div class="layui...原创 2019-01-10 10:51:30 · 11377 阅读 · 2 评论 -
layui关闭弹窗后刷新主页面和当前更改项
function open(t){ var id = $(t).attr("data-id"); var url = "{:U('home/.../...')}&id="+id; //弹出层 layer.open({ ... content: url, //弹窗打开...原创 2019-01-10 11:09:19 · 6599 阅读 · 1 评论 -
layui当有两个或多个弹框时，第二个弹起，第一个就要关闭
//关闭弹窗的方法<script type="text/javascript"> function closed(){ layer.close(abcs) } var abcs=''; function one(){ abcs =layer.open({ ... }) } function two(){ layer.open({ ......原创 2019-01-10 11:44:24 · 6752 阅读 · 0 评论 -
layui鼠标移上去的hover效果tips
效果： cols: [[ //表头 {field: '#', title: '查看详情', sort: true, width:130, templet:'#titleTipl',//模板id的DOM } ]]<script type="text/ht...原创 2019-01-10 12:01:08 · 25913 阅读 · 12 评论 -
layui的新页面打开
cols: [[ //表头 {field: '', title: '操作',toolbar: '#barDemo'} ]]<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" id="jump" lay-event="detail" title-data="{{d...原创 2019-01-10 13:54:36 · 26447 阅读 · 11 评论