LayUI笔记
LayUI
经典模块化前端框架,低门槛开箱即用的前端 UI 解决方案.
其他UI框架:
Bootstrap,Element, EasyUI,LayUI 等等
LayUI使用
Layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
1. 官网首页下载 https://www.layui.com/
2. 引入layui核心文件:
layui/css/layui.css // layui中内置的样式
layui/layui.js // layui中核心的js插件(模块化使用)
layui/layui.all.js // layui中所有的js
3. layui的目录介绍:
layui
├─css //css目录
│ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ ├─layui.css //核心样式文件
│ └─layui.mobile.css //移动端CCSS样式
├─font //字体图标目录(内置字体)
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件(所有模块的JS)
│─layui.js //基础核心库(所有JS的入口)
└─layui.all.js //包含layui.js和所有模块的合并文件(layui中所有的js)
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!--
1. 在JS引入时 若引入多个JS, JS之间存在依赖性.则优先引入被依赖的JS
2. 一般引入JS,在body的最后面引入,因为代码自上而下的执行,这样可以等页面的DOM元素都加载了引入JS,避免不生效和异常问题
-->
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
// 初始化layui模块
layui.use(['form','jquery'],function(){
// 初始化模块的对象
// 初始化jquery对象
var $ = layui.jquery;
// 初始化form表单模块对象
var form = layui.form;
});
</script>
</body>
</html>
页面元素
布局
栅格系统:
容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用.
一.栅格布局规则
- 采用 layui-row 来定义行,如:
<div class="layui-row"></div>
- 采用类似 layui-col-md 这样的预设类来定义一组列(column),且放在行(row)内。其中:变量md 代表的是不同屏幕下的标记(可选值见下文)变量代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
- 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
- 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的内边距的间距和偏移(自身所在容器的12等份)。
- 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局!
颜色
样式 | 颜色 |
---|---|
class="layui-bg-red" | 赤色,比较引人注意的颜色 |
class="layui-bg-orange" | 橙色,暖色系,一般用于提示性元素 |
class="layui-bg-green" | 墨绿,通常用于按钮、及任何修饰元素 |
class="layui-bg-cyan" | 藏青:侧边或底部普遍采用的颜色 |
class="layui-bg-blue" | 蓝色:比较适合一些鲜艳色系的页面 |
class="layui-bg-black" | 雅黑:通常用于导航 |
class="layui-bg-gray" | 银灰:背景、边框 |
字体图标
通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标.然后对元素加上图标对应的字体图标.
layui-icon : 表示是一个字体图标
layui-icon-XXXX:具体的内置图标
字体图标在LayUI中有两种表现方式:
1.使用class样式
2.使用图标字符集
例如:
<p>字体图标</p>
<!-- 使用class样式 -->
<i class="layui-icon layui-icon-rate"></i>
<!-- 使用特殊的字体字符集 -->
<i class="layui-icon"></i>
动画
内置动画,使用: class="layui-anim" 表示是动画,动画Layui内置8种,后面跟具体的动画效果
动画样式 | 动画效果 |
---|---|
class="layui-anim layui-anim-up" | 从最底部往上滑入 |
class="layui-anim layui-anim-upbit" | 微微向上划入 |
class="layui-anim layui-anim-scale" | 平滑放大 |
class="layui-anim layui-anim-scaleSpring" | 弹簧式放大 |
class="layui-anim layui-anim-fadein" | layui-anim-fadein |
class="layui-anim layui-anim-fadeout" | 渐隐 |
class="layui-anim layui-anim-rotate" | 360旋转 |
class="layui-anim layui-anim-loop" | 循环动画 |
按钮(重点)
使用class = "layui-btn" 表示按钮样式
颜色:
名称 | 组合 |
---|---|
原始 | class="layui-btn layui-btn-primary" |
默认 | class="layui-btn" |
百搭 | class="layui-btn layui-btn-normal" |
暖色 | class="layui-btn layui-btn-warm" |
警告 | class="layui-btn layui-btn-danger" |
禁用 | class="layui-btn layui-btn-disabled" |
尺寸:
尺寸 | 组合 |
---|---|
大型 | class="layui-btn layui-btn-lg" |
默认 | class="layui-btn" |
小型 | class="layui-btn layui-btn-sm" |
迷你 | class="layui-btn layui-btn-xs" |
形状:
是否圆角:class=" layui-btn-radius" :表示圆角
例如:
主题 | 组合 |
---|---|
原始 | class="layui-btn layui-btn-radius layui-btn-primary" |
默认 | class="layui-btn layui-btn-radius" |
百搭 | class="layui-btn layui-btn-radius layui-btn-normal" |
暖色 | class="layui-btn layui-btn-radius layui-btn-warm" |
警告 | class="layui-btn layui-btn-radius layui-btn-danger" |
禁用 | class="layui-btn layui-btn-radius layui-btn-disabled" |
图标按钮:即将button和i标签使用字体图标结合
<button class="layui-btn layui-btn-lg layui-btn-danger">
<i class="layui-icon layui-icon-fire"></i>按钮
</button>
注意:
class="layui-btn-group" 按钮组,将多个按钮放在一起,可以缩小默认的按钮之间的间隙
导航
layui默认导航是水平导航,使用: class="layui-nav".
class="layui-nav-item" : 表示导航中的项
水平导航
class="layui-nav" 表示导航 水平导航
|--- class="layui-nav-item" 表示导航中的具体项
|--- class="layui-nav-child" 表示导航项中的子项
|--- class="layui-this" 表示当前被选中的项
垂直导航
class="layui-nav layui-nav-tree" : 表示是导航中垂直导航
|--- class="layui-nav-itemed" : 被展开的导航项
|--- class="layui-nav-side" : 会垂直占一列
Tab选项卡
导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能.
在layui中,class="layui-tab"表示是一个选项卡
|--- class="layui-tab-title" : 表示选项卡的标题
|--- class="layui-this" : 表示当前被选中的项
|--- class="layui-tab-content" : 表示选项卡中的内容
|--- class="layui-tab-item" : 表示内容项
|--- class="layui-show" : 表示当前内容项会展示
选项卡风格:
样式 | 说明 |
---|---|
layui-tab-brief | 简单风格(下划线) |
layui-tab-card | Tab卡片风格(块) |
特殊属性:
属性名 | 说明 |
---|---|
lay-allowClose="true" | 选项卡可以被关闭(只要该属性有值,则表示生效) |
lay-id="xxx" | 选项卡中用于设置选项的唯一的匹配索引 |
lay-filter="xxx" | 选卡的唯一标识(一般用于layui中事件) |
事件:
事件名 | 说明 |
---|---|
element.on('tab(filter)', function(data){}); | 监听选项卡切换 |
element.on('tabDelete(filter)', function(data){})' | 监听选项卡的删除 |
element.tabAdd('demo', options); | 新增选项卡 |
element.tabChange('lay-filter值', layid); | 切换选项卡 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<div class="layui-tab" lay-allowClose="true" lay-filter="myTab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item ">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<button id="addBtn">新增一个选项卡</button>
<button id="addBtn2">切换选项卡</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//选项卡事件:
//选项卡切换事件
element.on('tab(myTab)',function(data){//tab(lay-filter的值)
console.log(data);
//当前选项信息: 整个选项卡信息以及当前信息
console.log(data.elem);
console.log("get(0):"+data.elem.get(0)); //jquery 对象 : js对象转化为jquery对象 jquery 对象怎么转化为js对象
// js对象转化为jquery 对象 : $(js对象) :
// 获取上一个选项
console.log(data.elem.prevObject);
//所在选项卡的下标索引, 从 0 开始
console.log(data.index);
});
//选项卡删除事件
element.on('tabDelete(myTab)', function(data){//tab(lay-filter的值)
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
//为按钮绑定点击事件
$("#addBtn").click(function(){
//新增选项卡
var tab = {
title: '新增选项卡的标题',
content: '选项卡的内容', //支持传入html
id: '999'
};
element.tabAdd("myTab", tab);
});
//切换选项卡
$("#addBtn2").click(function(){
//切换选项卡 tabChange("lay-filter的值", lay-id值);
element.tabChange("myTab", 999);
});
});
</script>
</body>
</html>
进度条
在layui中,使用class="layui-progress"表示进度条.
class="layui-progress-bar" 表示具体的进度条
class="layui-progress-big" 表示尺度大号
属性:
属性名 | 说明 |
---|---|
lay-percent="10%" | 进度条进度 |
lay-showPercent="true" | 是否显示进度值 |
lay-filter="XXX" | 事件操作相关属性值 |
事件:
事件名称 | 说明 |
---|---|
element.progress('lay-filter的值',value); | 更新进度条进度 |
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<!-- 表示进度条 -->
<div class="layui-progress" lay-showPercent="true" lay-filter="myProgress">
<div class="layui-progress-bar" lay-percent="0%" id="myProgressBar"></div>
</div>
<button id="btn1">开始涨涨涨</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//点击按钮后 让进度条进度增涨
$("#btn1").click(function(){
var m = 10;
window.setInterval(function(){
var v = m+"%";
m = m+10;
if(m > 100){
m = 100;
}
//获取进度条的值
element.progress('myProgress', v);
}, 1000);
});
});
</script>
</body>
</html>
面板
在layui中,面板是指:一个独立的容器,装元素,而折叠面板则能有效地节省页面的可视面积.
普通面板:
class="layui-card" : 表示普通面板
|--- class="layui-card-header" 面板的头部信息
|--- class="layui-card-body" 面板内容
折叠面板:
class="layui-collapse" : 表示折叠面板
|--- class="layui-colla-item" : 折叠面板中的项
|--- class="layui-colla-title" : 折叠面板中的项中的标题
|--- class="layui-colla-content" : 折叠面板项中的内容
|--- class="layui-show" : 折叠面板中 展开的项
属性:
属性名 | 说明 |
---|---|
lay-accordion | 表示折叠面板只能展开一个面板项 |
事件
事件名 | 说明 |
---|---|
element.on('collapse(lay-filter值)', function(data){}); | 监听面板的展开或者收缩 |
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<h1>普通面板</h1>
<div class="layui-card">
<div class="layui-card-header">面板标题</div>
<div class="layui-card-body">
面板内容
</div>
</div>
<h1>折叠面板</h1>
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content ">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content ">内容区域</div>
</div>
</div>
<h1>手风琴面板---只能显示一个</h1>
<div class="layui-collapse" lay-accordion lay-filter="myPanel">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
</div>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//监听面板的展开或者收缩
element.on('collapse(myPanel)', function(data){
//console.log(data);
console.log(data.show); //得到当前面板的展开状态,true或者false
console.log(data.title); //得到当前点击面板的标题区域DOM对象
console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
});
</script>
</body>
</html>
时间线
在layui中,使用class="layui-timeline"表示时间线.
使用class="layui-timeline-item" 表示实现线中的项
|--- class="layui-timeline-content 表示时间线的内容
|--- class="layui-timeline-title" 表示内容的标题
使用<p>标签表示具体的内容
注意: 在时间线中可以插入图标:
<i class="layui-icon layui-timeline-axis"></i>
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
<br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利72周年
<br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis" style="color:red"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
});
</script>
</body>
</html>
表单-form(重点)
在layui中,layui不仅仅为表单提供了一套内置的样式.也为表单提供了一系列的操作的方法.
样式:
class="layui-form"表示该容器使用表单的样式.该样式,是表单中具体样式的基础.
|--- class="layui-form-item" : 表示表单中的具体项
|--- class="layui-form-label" : 表示表单项中label标签,文本说明
|--- class="layui-input-block" : 表示一个input容器,block块元素 占一行
|--- class="layui-input-inline" : 表示一个input容器,inline 行内块.不占一行
|--- class="layui-input" : 表示一个input标签
|--- class="layui-inline" : 表示不独占一行,一般用于一项中存在多个form元素,使用其包裹
特殊样式:
在layui中,对form表单中checkbox,radio,select的样式,做了特殊处理.使用javascript,根据原生input中的属性,进行渲染,重新生成了响应效果的DIV元素.并且生成的DIV元素与原生input标签存在属性值的绑定关系.
复选框:
属性名 | 说明 |
---|---|
title | 显示的文字 |
lay-skin | 风格:默认 primary 原始复选框效果 switch: 开关形式 |
checked | 选中 |
value | 复选框值 |
lay-text="文本1|文本2" | 开关效果显示的文字 |
单选按钮:
属性名 | 说明 |
---|---|
title | 显示的文字 |
checked | 选中 |
value | 复选框值 |
下拉框:
属性名 | 说明 |
---|---|
selected | 选中 |
lay-search | 开启搜索效果 |
form表单特殊属性:
属性名 | 属性值 | 说明 |
---|---|---|
title | 任意字符 | 设定元素名称,一般用于checkbox、radio框 |
lay-skin | switch(开关风格) primary(原始风格) | 定义元素的风格,目前只对 checkbox 元素有效,可将其转变为开关样式 |
lay-ignore | 任意字符或不设值 | 是否忽略元素美化处理。设置后,将不会对该元素进行初始化渲染,即保留系统风格 |
lay-filter | 任意字符 | 事件过滤器,主要用于事件的精确匹配,跟选择器是比较类似的。其实它并不私属于form模块,它在 layui 的很多基于事件的接口中都会应用到。 |
lay-verify | email(邮箱)url(网址) number(数字) date(日期) identity(身份证) 自定义值 | 同时支持多条规则的验证,格式:lay-verify="验证A|验证B" 如:lay-verify="required|phone|number" 另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify="pass",那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证 |
lay-verType | tips(吸附层) alert(对话框) msg(默认) | 用于定义异常提示层模式。 |
lay-reqText | 任意字符 | 用于自定义必填项(即设定了 lay-verify="required" 的表单)的提示文本 注意:该功能为 layui 2.5.0 新增 |
lay-submit | 无需填写值 | 绑定触发提交的元素,如button |
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-block">
<input class="layui-input" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg" lay-reqText="独占一行不能为空" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">显示文字1</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" lay-verify="number|username" lay-verType="tips"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" placeholder="显示的文字" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框:</label>
<div class="layui-input-block">
<!-- 原始风格 -->
<input type="checkbox" name="like[write]" title="写作" lay-skin="primary">
<!-- 开关风格 -->
<input type="checkbox" name="like[read]" lay-text="文本1|文本2" lay-skin="switch" checked>
<!-- 默认风格 -->
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选按钮:</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉框:</label>
<div class="layui-input-block">
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
</div>
</div>
<button class="layui-btn" lay-submit >提交</button>
</form>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use([ 'element', 'jquery', 'form' ], function() {
var element = layui.element;
var $ = layui.jquery;
var from = layui.form;
//自定义校验规则
from.verify({
username:function(value, item){
console.log(value);
if(value.length < 10){
return '用户名不能少于10位';
}
}
});
});
</script>
</body>
</html>
事件:
事件类型 | 描述 |
---|---|
select | 监听select下拉选择事件 |
checkbox | 监听checkbox复选框勾选事件 |
switch | 监听checkbox复选框开关事件 |
radio | 监听radio单选框事件 |
submit | 监听表单提交事件 |
方法:
方法名称 | 解释 |
---|---|
render() | 重新渲染 |
val() | 获取或者为表单赋值 |
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<form class="layui-form" action="http://www.baidu.com" lay-filter="myForm">
<div class="layui-form-item">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-block">
<input class="layui-input" name="input1" value="13111111111" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg" lay-reqText="独占一行不能为空" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">显示文字1</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" name="input2" value="13111111111" lay-verify="number|username" lay-verType="tips"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" name="input3" placeholder="显示的文字" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框:</label>
<div class="layui-input-block">
<!-- 原始风格 -->
<input type="checkbox" lay-filter="formCheckbox" value="写作" name="like[write]" title="写作" lay-skin="primary">
<!-- 开关风格 -->
<input type="checkbox" lay-filter="formCheckbox" value="文本" name="like[text]" lay-text="文本1|文本2" lay-skin="switch" checked>
<!-- 默认风格 -->
<input type="checkbox" lay-filter="formCheckbox" value="发呆" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选按钮:</label>
<div class="layui-input-block">
<input type="radio" lay-filter="formRadio" name="sex" value="男" title="男">
<input type="radio" lay-filter="formRadio" name="sex" value="女" title="女" checked>
<input type="radio" lay-filter="formRadio" name="sex" value="" title="中性" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉框:</label>
<div class="layui-input-block">
<select id="city" name="city" lay-search lay-filter="formSelect">
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
</div>
</div>
<button class="layui-btn" lay-submit lay-filter="submitBtn">提交</button>
</form>
<br>
<button class="layui-btn" id="initForm">为表单初始化值</button>
<br>
<button class="layui-btn" id="addDom">为下拉框新增option</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use([ 'element', 'jquery', 'form' ], function() {
var element = layui.element;
var $ = layui.jquery;
var form = layui.form;
//自定义校验规则
form.verify({
username:function(value, item){
if(value.length < 10){
return '用户名不能少于10位';
}
}
});
//==========监听下拉框选择事件===========
//监听下拉框选择事件
form.on("select(formSelect)",function(data){
console.log(data);
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
//==========复选框选择事件:只支持原生风格 默认风格===========
form.on("checkbox(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 原生风格和默认风格
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中,true或者false
console.log(data.value); //复选框value值,也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
//===========复选框选择事件:开关风格===========
form.on("switch(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启,true或者false
console.log(data.value); //开关value值,也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
//==========单选按钮:==========
form.on("radio(formRadio)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});
//========监听表单提交=========
form.on('submit(submitBtn)',function(data){// submit(lay-filter值):lay-filter值是提交按钮上面
console.log(data);
console.log(data.field);
//阻止表单提交 因为表单提交后 会刷新页面.一般使用ajax提交表单数据,然后阻止表单提交.只有使用layui的表单提交才能触发数据校验.
//使用layui的表单提交事件,在事件中使用ajax提交数据,然后阻止表单提交,这样既可以使用layui的数据校验,也可以使用ajax的异步提交数据
return false;
});
//==========方法: 为表单初始化值:===========
$("#initForm").click(function(){
var data = {
'input1':'12345678911',
'input2':'12345678911',
'input3':'12345678911',
'like[write]': true,
'like[text]':true,
'like[dai]':true,
'sex':'女',
'city':'021'
};
form.val("myForm",data);//此时lay-filter值,是form表单上的lay-filter值
//得到form的值
console.log(form.val("myForm"));
});
//===========方法: 重新渲染表单============
$("#addDom").click(function(){
$("#city").append("<option value='option' >新增option</option>");
//重新渲染表单
form.render();
});
});
</script>
</body>
</html>
表格-table(重点)
在layui中,使用class="layui-table"表示表格的样式.表格分为静态表格和动态表格.静态表格是指页面固定数据写死的静态HTML标签.动态的表格是指使用Javascript自动渲染出来的表格.根据数据,以及特定属性渲染出响应的表格.
表格基础参数
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
elem | String/DOM | 指定原始 table 容器的选择器或 DOM,方法渲染方式必填 | "#demo" |
cols | Array | 设置表头。值是一个二维数组。方法渲染方式必填 | 详见表头参数 |
url(等) | - | 异步数据接口相关参数。其中 url 参数为必填项 | 详见异步接口 |
toolbar | String/DOM/Boolean | 开启表格头部工具栏区域,该参数支持四种类型值:toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器toolbar: '
xxx
' //直接传入工具栏模板字符toolbar: true //仅开启工具栏,不显示左侧模板toolbar: 'default' //让工具栏左侧显示默认的内置模板注意: 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能,则必须开启该参数 |
false |
defaultToolbar | Array | 该参数可自由配置头部工具栏右侧的图标按钮 | 详见头工具栏图标 |
width | Number | 设定容器宽度。table容器的默认宽度是跟随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。 | 1000 |
height | Number/String | 设定容器高度 | 详见height |
cellMinWidth | Number | (layui 2.2.1 新增)全局定义所有常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth | 100 |
done | Function | 数据渲染完的回调。你可以借此做一些其它的操作 | 详见done回调 |
data | Array | 直接赋值数据。既适用于只展示一页数据,也非常适用于对一段已知数据进行多页展示。 | [{}, {}, {}, {}, …] |
totalRow | Boolean | 是否开启合计行区域。layui 2.4.0 新增 | false |
page | Boolean/Object | 开启分页(默认:false) 注:从 layui 2.2.0 开始,支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外) | {theme: '#c00'} |
limit | Number | 每页显示的条数(默认:10)。值务必对应 limits 参数的选项。 注意:优先级低于 page 参数中的 limit 参数 | 30 |
limits | Array | 每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。 注意:优先级低于 page 参数中的 limits 参数 | [30,60,90] |
loading | Boolean | 是否显示加载条(默认:true)。如果设置 false,则在切换分页时,不会出现加载条。该参数只适用于 url 参数开启的方式 | false |
title | String | 定义 table 的大标题(在文件导出等地方会用到)layui 2.4.0 新增 | "用户表" |
text | Object | 自定义文本,如空数据时的异常提示等。注:layui 2.2.5 开始新增。 | 详见自定义文本 |
autoSort | Boolean | 默认 true,即直接由 table 组件在前端自动处理排序。 若为 false,则需自主排序,通常由服务端直接返回排序好的数据。 注意:该参数为 layui 2.4.4 新增 | 详见监听排序 |
initSort | Object | 初始排序状态。用于在数据表格渲染完毕时,默认按某个字段排序。 | 详见初始排序 |
id | String | 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。 值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从 |
test |
skin(等) | - | 设定表格各种外观、尺寸等 | 详见表格风格 |
表头参数
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
field | String | 设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识,其值是JSON数据中key | username |
title | String | 设定标题名称,显示标题 | 用户名 |
width | Number/String | 设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比 请结合实际情况,对不同列做不同设定。 | 200 30% |
minWidth | Number | 局部定义当前常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth | 100 |
type | String | 设定列类型。可选值有:normal(常规列,无需设定)checkbox(复选框列)radio(单选框列,layui 2.4.0 新增)numbers(序号列)space(空列) | 任意一个可选值 |
LAY_CHECKED | Boolean | 是否全选状态(默认:false)。必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 | true |
fixed | String | 固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。 注意:如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面。 | left(同 true) right |
hide | Boolean | 是否初始隐藏列,默认:false。layui 2.4.0 新增 | true |
totalRow | Boolean | 是否开启该列的自动合计功能,默认:false。layui 2.4.0 新增 | true |
totalRowText | String | 用于显示自定义的合计文本。layui 2.4.0 新增 | "合计:" |
sort | Boolean | 是否允许排序(默认:false)。如果设置 true,则在对应的表头显示排序icon,从而对列开启排序功能。注意:不推荐对值同时存在“数字和普通字符”的列开启排序,因为会进入字典序比对。比如:'贤心' > '2' > '100',这可能并不是你想要的结果,但字典序排列算法(ASCII码比对)就是如此。 | true |
unresize | Boolean | 是否禁用拖拽列宽(默认:false)。默认情况下会根据列类型(type)来决定是否禁用,如复选框列,会自动禁用。而其它普通列,默认允许拖拽列宽,当然你也可以设置 true 来禁用该功能。 | false |
edit | String | 单元格编辑类型(默认不开启)目前只支持:text(输入框) | text |
event | String | 自定义单元格点击事件名,以便在 tool 事件中完成对该单元格的业务处理 | 任意字符 |
style | String | 自定义单元格样式。即传入 CSS 样式 | background-color: #5FB878; color: #fff; |
align | String | 单元格排列方式。可选值有:left(默认)、center(居中)、right(居右) | center |
colspan | Number | 单元格所占列数(默认:1)。一般用于多级表头 | 3 |
rowspan | Number | 单元格所占行数(默认:1)。一般用于多级表头 | 2 |
templet | String | 自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等 | 详见自定义模板 |
toolbar | String | 行工具栏 | 详见行工具事件 |
异步数据接口参数
数据的异步请求由以下几个参数组成:
参数名 | 功能 |
---|---|
url | 接口地址。默认会自动传递两个参数:?page=1&limit=30(该参数可通过 request 自定义) page 代表当前页码、limit 代表每页数据量 |
method | 接口http请求类型,默认:get |
where | 接口的其它参数。如:where: {token: 'sasasas', id: 123} |
contentType | 发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json' |
headers | 接口的请求头。如:headers: {token: 'sasasas'} |
parseData | 数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式.在layui中,默认规定返回3个字段: code,msg,count,data,并且默认code的值为0表示正常.其他值不正常.且data是一个数组.其他格式layui默认是无法解析.所以需要使用parseData函数进行适配.![]() |
request | 用于对分页请求的参数:page、limit重新设定名称,如: |
response | 如果你想重新规定返回的数据格式,那么可以借助 response 参数,如:![]() |
在layui中,渲染表格存在两种方式:
方式一:自动渲染
所谓的自动渲染,即:在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。你需要关注的是以下三点:
- 带有 class="layui-table" 的
标签。
- 对标签设置属性 lay-data="" 用于配置一些基础参数
- 在
标签中设置属性lay-data=""用于配置表头信息 示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!-- 自动渲染 -->
<!-- lay-data属性配置基础参数信息 -->
<table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
<thead>
<tr>
<th lay-data="{field:'id', width:80}">用户ID</th>
<th lay-data="{field:'username', width:120}">用户名称</th>
<th lay-data="{field:'sex', width:50}">性别</th>
<th lay-data="{field:'city', width:80}">城市</th>
<th lay-data="{field:'sign', width:80}">签名</th>
<th lay-data="{field:'experience', width:80}">积分</th>
<th lay-data="{field:'score', width:80}">评分</th>
<th lay-data="{field:'wealth',sort:true}">财富</th>
<th lay-data="{field:'classify', width:80}">职业</th>
</tr>
</thead>
</table>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['jquery', 'table' ], function() {
var $ = layui.jquery;
var table = layui.table;
});
</script>
</body>
</html>
方式二:方法渲染
方法级渲染”将基础参数的设定放在了JS代码中",页面只需要定义一个table,然后在JS中找到table进行绑定.然后将这个table进行数据渲染。
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!-- 自动渲染 -->
<!-- lay-data属性配置基础参数信息 -->
<!-- <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
<thead>
<tr>
<th lay-data="{field:'id', width:80}">用户ID</th>
<th lay-data="{field:'username', width:120}">用户名称</th>
<th lay-data="{field:'sex', width:50}">性别</th>
<th lay-data="{field:'city', width:80}">城市</th>
<th lay-data="{field:'sign', width:80}">签名</th>
<th lay-data="{field:'experience', width:80}">积分</th>
<th lay-data="{field:'score', width:80}">评分</th>
<th lay-data="{field:'wealth',sort:true}">财富</th>
<th lay-data="{field:'classify', width:80}">职业</th>
</tr>
</thead>
</table> -->
<!-- 方法渲染 -->
<table class="layui-table" id="myTable"></table> <script type="text/html" id="titleTpl">
{{# if(d.sex == '男'){ }}
<font color='red'>GG</font>
{{# } else if(d.sex == '女') { }}
<font color='green'>MM</font>
{{# } }}
</script>
<script type="text/html" id="headBtns">
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
</script>
<script type="text/html" id="rowBtns">
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
</script>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['jquery', 'table' ], function() {
var $ = layui.jquery;
var table = layui.table;
//渲染表格 且返回该表格对象
var t = table.render({
id:'myTableId', //容器对象的唯一标识
elem:"#myTable",// 绑定的table容器
url:'data/data01.json',//数据接口
page:true,//开启分页
toolbar:"#headBtns",//开启表头工具栏 默认会开启右侧默认工具栏
defaultToolbar:['exports','filter','print'],//自定义默认工具栏 exports 导出 filter 筛选 print 打印
width:1200, //设置table容器宽度 只支持像素
height:520, //设置table容器的高度 只支持像素
cellMinWidth: 60,// 设置表格中单元格的最小宽度 一般用于自动分配,若表头中设置了则使用表头
done:function(res, curr, count){ //表格渲染完成后进行回调
console.log(res); // 返回的数据
console.log(curr);//当前页
console.log(count);//总数据条数
},
parseData:function(rs){//此时对数据进行解析适配 rs就是后台返回的数据
return {
"code":rs.code,
"msg":rs.msg,
"count":rs.count,
"data":rs.data.data
} },
response: {// 为响应的数据进行别名
//statusName: 'status' //规定数据状态的字段名称,默认:code
statusCode: 200 //规定成功的状态码,默认:0
//,msgName: 'hint' //规定状态信息的字段名称,默认:msg
//,countName: 'total' //规定数据总数的字段名称,默认:count
//,dataName: 'rows' //规定数据列表的字段名称,默认:data
} ,
request: {//对默认请求参数进行别名
pageName: 'currentPage', //页码的参数名称,默认:page
limitName: 'pageSize' //每页数据量的参数名,默认:limit
},
where:{'name':'张三'},
totalRow:true,//开启数据统计,需要在需统计的列中配置 :totalRow:true
limit:20,//每页显示的条数
limits:[20,50,100],//每页条数的选择项
loading:true,//是否显示加载条 在table进行数据加载时,是否显示loading的效果
title:'用户表',//在数据导出时 用于设置文件的名称
text:{
none: '没有符合条件的数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
},
autoSort:false,// 是否前端进行排序
//skin:'nob', //边框风格
even:true,// 隔行背景
cols:[[
{type:'checkbox',width:80,LAY_CHECKED:true},
{field:'id',title:'ID', width:80},
{field:'username',title:'用户名', width:80},
/* {field:'sex',title:'性别', width:80,templet:function(d){
var sex = d.sex;
if(sex =='男'){
return "<font color='red'>GG</font>";
}else if(sex =='女'){
return "<font color='green'>MM</font>";
}
}}, */
{field:'sex',title:'性别', width:80,templet:'#titleTpl'},
{field:'city',title:'城市', width:80},
{field:'sign',title:'签名',edit:'text', width:80},
{field:'experience',title:'积分',width:80},
{field:'score',title:'评分',unresize:true,totalRowText:'合计:', width:80},
{field:'wealth',title:'财富',totalRow:true,align:'center'},
{field:'classify',title:'职业', width:80,style:'color:red'},
{title:'操作', width:200,fixed:'right',toolbar:'#rowBtns'},
]] //设置表头 });
});
</script>
</body>
</html>
table中的方法
方法名 说明 reader() 渲染一个table table.checkStatus('ID') 获取选中的行,id为初始化的ID值 row.del() 删除行 row.update({username: '123' ,title: 'xxx'}); 修改行 reload("初始化ID",option)或者初始化对象.reload(option) 重载表格 事件监听
事件类型 说明 table.on('toolbar('table的lay-filter值')', function(obj){}); 监听头工具栏事件 table.on('checkbox('table的lay-filter值')', function(obj){}); 监听复选框选择事件 table.on('edit('table的lay-filter值')', function(obj){}); 监听单元格编辑事件 table.on('row(test)', function(obj){}); 监听行单击事件 table.on('tool(test)', function(obj){}); 监听行工具栏事件 注意: 在工具栏事件中,工具栏中存在多个按钮,即多种事件,在layui中,使用lay-event进行区分.
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!-- 自动渲染 -->
<!-- lay-data属性配置基础参数信息 -->
<!-- <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
<thead>
<tr>
<th lay-data="{field:'id', width:80}">用户ID</th>
<th lay-data="{field:'username', width:120}">用户名称</th>
<th lay-data="{field:'sex', width:50}">性别</th>
<th lay-data="{field:'city', width:80}">城市</th>
<th lay-data="{field:'sign', width:80}">签名</th>
<th lay-data="{field:'experience', width:80}">积分</th>
<th lay-data="{field:'score', width:80}">评分</th>
<th lay-data="{field:'wealth',sort:true}">财富</th>
<th lay-data="{field:'classify', width:80}">职业</th>
</tr>
</thead>
</table> -->
<input type="text" id="name"/> <button id="searchBtn" class="layui-btn">搜索</button>
<!-- 方法渲染 -->
<table class="layui-table" id="myTable" lay-filter="myTableFilter"></table> <script type="text/html" id="titleTpl">
{{# if(d.sex == '男'){ }}
<font color='red'>GG</font>
{{# } else if(d.sex == '女') { }}
<font color='green'>MM</font>
{{# } }}
</script>
<script type="text/html" id="headBtns">
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm" lay-event='add'>
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm" lay-event='del'>
<i class="layui-icon"></i>
</button>
</div>
</script>
<script type="text/html" id="rowBtns">
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm" lay-event='update'>
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm" lay-event='del'>
<i class="layui-icon"></i>
</button>
</div>
</script>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['layer','jquery', 'table' ], function() {
var $ = layui.jquery;
var table = layui.table;
var layer = layui.layer;
// 渲染表格 且返回该表格对象
var t = table.render({
id:'myTableId', // 容器对象的唯一标识
elem:"#myTable",// 绑定的table容器
url:'data/data01.json',//数据接口
page:true,// 开启分页
toolbar:"#headBtns",// 开启表头工具栏 默认会开启右侧默认工具栏
defaultToolbar:['exports','filter','print'],//自定义默认工具栏 exports 导出 filter 筛选 print 打印
width:1200, // 设置table容器宽度 只支持像素
height:520, // 设置table容器的高度 只支持像素
cellMinWidth: 60,// 设置表格中单元格的最小宽度 一般用于自动分配,若表头中设置了则使用表头
done:function(res, curr, count){ //表格渲染完成后进行回调
console.log(res); // 返回的数据
console.log(curr);// 当前页
console.log(count);// 总数据条数
},
parseData:function(rs){//此时对数据进行解析适配 rs就是后台返回的数据
return {
"code":rs.code,
"msg":rs.msg,
"count":rs.count,
"data":rs.data.data
} },
response: {// 为响应的数据进行别名
//statusName: 'status' //规定数据状态的字段名称,默认:code
statusCode: 200 //规定成功的状态码,默认:0
//,msgName: 'hint' //规定状态信息的字段名称,默认:msg
//,countName: 'total' //规定数据总数的字段名称,默认:count
//,dataName: 'rows' //规定数据列表的字段名称,默认:data
} ,
request: {//对默认请求参数进行别名
pageName: 'currentPage', //页码的参数名称,默认:page
limitName: 'pageSize' //每页数据量的参数名,默认:limit
},
where:{'name':'张三'},
totalRow:true,//开启数据统计,需要在需统计的列中配置 :totalRow:true
limit:20,//每页显示的条数
limits:[20,50,100],//每页条数的选择项
loading:true,//是否显示加载条 在table进行数据加载时,是否显示loading的效果
title:'用户表',//在数据导出时 用于设置文件的名称
text:{
none: '没有符合条件的数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
},
autoSort:false,// 是否前端进行排序
//skin:'nob', //边框风格
even:true,// 隔行背景
cols:[[
{type:'checkbox',width:80,LAY_CHECKED:false},
{field:'id',title:'ID', width:80},
{field:'username',title:'用户名', width:80},
/* {field:'sex',title:'性别', width:80,templet:function(d){
var sex = d.sex;
if(sex =='男'){
return "<font color='red'>GG</font>";
}else if(sex =='女'){
return "<font color='green'>MM</font>";
}
}}, */
{field:'sex',title:'性别', width:80,templet:'#titleTpl'},
{field:'city',title:'城市', width:80},
{field:'sign',title:'签名',edit:'text', width:80},
{field:'experience',title:'积分',width:80},
{field:'score',title:'评分',unresize:true,totalRowText:'合计:', width:80},
{field:'wealth',title:'财富',totalRow:true,align:'center'},
{field:'classify',title:'职业', width:80,style:'color:red'},
{title:'操作', width:200,fixed:'right',toolbar:'#rowBtns'},
]] //设置表头 });
//===========事件监听=============
//头工具栏事件监听
table.on('toolbar(myTableFilter)', function(obj){
console.log(obj);
//获取事件类型
var event = obj.event;
if(event == 'add'){
console.log("触发添加");
}else if(event == 'del'){
console.log("触发删除");
//获取选中的数据
var data = table.checkStatus('myTableId');
console.log(data);//选中的数据
console.log(data.data);// 选中的具体数据
console.log(data.isAll);//是否全选 true 全选 false 不是全选
}
});
//==========表格行监听事件 ============
table.on('tool(myTableFilter)', function(obj){
console.log(obj);
//获取事件类型
var event = obj.event;
console.log(event);
var data = obj.data;// 获取该行数据
console.log(data);
if(event == 'update'){
console.log("修改业务");
//修改数据
obj.update({
'id':'UID',
'username':'韩梅梅'
});
}else if(event == 'del'){
console.log("删除业务");
//方法: 删除该行
obj.del();
}
});
//=========复选框选择监听事件=============
table.on('checkbox(myTableFilter)', function(obj){
console.log(obj);
console.log(obj.checked);//复选框的选中状态
console.log(obj.data);//所在行的数据
});
//==========单元格编辑事件============
table.on('edit(myTableFilter)', function(obj){
console.log(obj);
console.log(obj.value);//单元格编辑后的新值
console.log(obj.data);//修改后的行数据
console.log(obj.field);//被修改的字段
});
//=============行单击事件=============
table.on('row(myTableFilter)', function(obj){
console.log(obj);
console.log(obj.data);
layer.msg(JSON.stringify(obj.data));
});
// 重新渲染表格
$("#searchBtn").click(function(){
t.reload({
where:{
'name':$("#name").val(),
'minAge':18,
'maxAge':30
}
})
});
});
</script>
</body>
</html>
日期和时间- laydate(重点)
laydate使用
定义一个日期时间容器
初始化laydate组件
入门示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
<div class="layui-inline">
<input class="layui-input" id="beginTime" readonly="readonly" />
</div>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['layer','jquery', 'laydate' ], function() {
var layer = layui.layer;
var $ = layui.jquery;
var laydate = layui.laydate;
//2. 初始化组件
laydate.render({
elem:"#beginTime"
});
});
</script>
</body>
</html>
配置参数
属性名 值类型 说明 elem DOM/String 绑定的容器 type String year:只提供年列表选择
month:只提供年、月选择
date:年、月、日。type默认值
time:只提供时、分、秒选择
datetime:可选择:年、月、日、时、分、秒range Boolean/String 开启范围选择 format String 时间字符串格式,默认:yyyy-MM-dd min/max string 最小值/最大值 isInitValue boolean 是否允许给默认值 trigger String 默认是:focus,如果绑定的元素非输入框,则默认事件为:click show boolean 是否默认显示 zIndex number 设置浮层的层叠顺序,值越大显示在最外层 showBottom boolean 是否显示底部工具栏 btns array 底部工具栏按钮,默认值:['clear', 'now', 'confirm'] lang string cn 中文(默认值) en 英文 theme string default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题) calendar boolean 是否显示公历节日 mark Object 标记重要的节日 事件
事件名 说明 ready: function(date){} 组件弹出时触发 change: function(value, date, endDate){} 年月日时间被切换时都会触发(只支持范围时生效) done: function(value, date, endDate){} 选择完成时 才生效 代码示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<h1>年月日期选择器-date</h1>
<!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
<div class="layui-inline">
<input class="layui-input" id="beginTime" readonly="readonly" />
</div>
<h1>年月日期选择器-month</h1>
<!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
<div class="layui-inline">
<input class="layui-input" id="month" readonly="readonly" />
</div>
<h1>年月日期选择器-time</h1>
<!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
<div class="layui-inline">
<input class="layui-input" id="time" readonly="readonly" />
</div>
<h1>年月日期选择器-datetime</h1>
<!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
<div class="layui-inline">
<input class="layui-input" id="datetime" readonly="readonly" />
</div>
<h6>年月日期选择器-触发事件</h6>
<!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
<div class="layui-inline">
<button id="btn1" >选择时间</button>
</div>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['layer','jquery', 'laydate' ], function() {
var layer = layui.layer;
var $ = layui.jquery;
var laydate = layui.laydate;
//2. 初始化组件
laydate.render({
elem:"#beginTime",
//range:true,//开启范围选择
//format: 'yyyy年MM月dd日', // 时间日期格式
value : '2019-11-19', // 设置默认值
min:'2019-01-01', // 限制的最小值
max:'2019-12-31', //限制的最大值
show:true, //是否默认显示
//showBottom:false, //是否显示底部工具栏
btns :['clear', 'now','confirm'],// 底部工具栏按钮
//lang :'en' ,// 显示的语言环境
theme:'molv', //主题色
calendar:true, //是否显示公历节日
mark:{
'0-9-18':'国耻日',
'0-0-15':'发工资'
}, //标记重要的日子
ready: function(date){//组件打开时触发
//注意 date 当前选中的时间 默认当前时间
console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
},
change: function(value, date, endDate){
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
},
done: function(value, date, endDate){//选择完成时 才生效
console.log("done");
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
}
});
laydate.render({
elem:"#month",
type:'month'
});
laydate.render({
elem:"#time",
type:'time'
});
laydate.render({
elem:"#datetime",
type:'datetime'
});
laydate.render({
elem:"#btn1"
});
});
</script>
</body>
</html>
弹出层-layer(重点)
layer的使用
- 初始化layer对象
- 调用layer中方法
入门示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<p>
<button class="layui-btn" id="btn1">点击我</button>
<button class="layui-btn" id="btn2">点击我</button>
</p>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['layer','jquery'], function() {
var layer = layui.layer;
var $ = layui.jquery;
// 消息
$("#btn1").click(function(){
layer.msg("弹出层 ----消息");
});
// 对话框
$("#btn2").click(function(){
layer.alert("弹出层 ----消息");
});
});
</script>
</body>
</html>
基础参数
属性名 值类型 说明 type Number 层类型:layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外) title String/Array/Boolean title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false content String/DOM/Array content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同 skin String 弹出主题色,内置layui-layer-lan**layui-layer-molv area String/Array 弹出等的宽高,默认:'auto' offset String/Array 页面位置,默认:垂直水平居中 icon Number 信息框和加载层的私有参数,只对这两种弹出层生效 btn String/Array 默认:'确认'按钮,若想有多个,则使用数组 btnAlign String 默认:r,内置的按钮的排列.
btnAlign: 'l' 按钮左对齐
btnAlign: 'c' 按钮居中对齐
btnAlign: 'r' 按钮右对齐closeBtn String/Boolean layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0 shade String/Array/Boolean 即弹层外区域。默认是0.3透明度的黑色背景('#000'),如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0 shadeClose Boolean 默认:false ,是否点击遮罩关闭 time Number 自动关闭所需毫秒 id String 用于控制弹层唯一标识 anim Number 弹出动画 isOutAnim Boolean 默认:true,默认情况下,关闭层时会有一个过度动画。如果你不想开启,设置 isOutAnim: false 即可 maxmin Boolean 最大最小化,默认:false fixed Boolean 默认,true,即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可 resize Boolean 默认:true,是否允许改变弹层的大小 maxWidth Number 弹层最大的宽度,默认360 maxHeight Number 最大高度,默认:无 zIndex Number 层叠顺序,默认:19891014 move String/DOM/Boolean 默认:选中标题可以进行拖动,move: false moveOut Boolean 默认:false,是否允许拖拽到窗口外 属性示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<p>
<button class="layui-btn" id="btn1">点击我</button>
<button class="layui-btn" id="btn2">点击我</button>
</p>
<hr />
<p>
<button class="layui-btn" id="btn3">演示弹层各种属性</button>
</p>
<div style="height: 2000px">111</div>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['layer','jquery'], function() {
var layer = layui.layer;
var $ = layui.jquery;
// 消息
$("#btn1").click(function(){
layer.msg("弹出层 ----消息");
});
// 对话框
$("#btn2").click(function(){
layer.alert("弹出层 ----消息");
});
//===========演示弹层各种属性===========
$("#btn3").click(function(){
layer.open({
title :'我是自己定义的标题', //标题
type:1,// 表示页面层 0 信息框 1 页面层 2 iframe
// 当type为 1时 此时 content 可以时html字符串,也可以dom对象
// 当type为2时, 此时 content是一个url地址
content:"<div>内容</div>",
//skin:'layui-layer-lan',//主题色
area:['500px','500px'],//设置弹出层的宽高
//offset:'rb',// 弹层的位置
btn:['按钮1','按钮2'],//自定义按钮
btnAlign: 'c',//按钮排列方式
closeBtn :1, // 关闭按钮 1,2 2种, 0 表示没有关闭按钮
shade :[0.8, '#393D49'],// 透明度 颜色
shadeClose :true,// 点击遮罩层是否关闭
id:'layerId1',// 弹层唯一标识
anim:6, // 动画效果
//isOutAnim :false,// 关闭时的动画
maxmin:true,//最小最大化
fixed :true,// 固定弹层的位置
resize:false,// 是否允许改变弹层大小
//move:false, //是否允许拖动 false 不允许拖动
moveOut:true //是否允许拖动到窗口外
});
});
});
</script>
</body>
</html>
方法
方法名 说明 index = layer.open(options) 根据配置,创建弹出层,返回弹出层的索引标识 layer.close(index) 关闭指定索引的弹出层 layer.closeAll([type]) 关闭所有的弹出层,关闭指定类型的弹出层 layer.alert(content, options, yes) 普通信息框:
content : 显示的内容
yes:点击确定调用函数
options:相关配置layer.confirm(content, options, yes) 询问框:
content : 显示的内容
yes:点击确定调用函数
options:相关配置layer.msg(content, options, end) 提示框:
content : 显示的内容
end:提示框消失时调用的函数
options:相关配置事件
事件名称 说明 success: function(layero, index){} 层弹出成功后回调的方法 yes: function(index, layero){} 点击yes按钮调用的方法 cancel: function(index, layero){} 点击右上角关闭按钮调用的方法 end: function(index, layero){} 层销毁后调用的方法 多个按钮自定义事件 代码示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<p>
<button class="layui-btn" id="btn1">点击我</button>
<button class="layui-btn" id="btn2">点击我</button>
</p>
<hr />
<p>
<button class="layui-btn" id="btn3">演示弹层各种属性</button>
</p>
<hr />
<p>
<button class="layui-btn" id="btn4">弹出的信息框</button>
</p>
<hr />
<p>
<button class="layui-btn" id="btn5">弹出的询问框</button>
</p>
<hr />
<p>
<button class="layui-btn" id="btn6">弹出的提示框</button>
</p> <script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['layer','jquery'], function() {
var layer = layui.layer;
var $ = layui.jquery;
// 消息
$("#btn1").click(function(){
layer.msg("弹出层 ----消息");
});
// 对话框
$("#btn2").click(function(){
layer.alert("弹出层 ----消息");
});
//=====演示弹层各种属性=================================================
$("#btn3").click(function(){
layer.open({
title :'我是自己定义的标题', //标题
type:1,// 表示页面层 0 信息框 1 页面层 2 iframe
// 当type为 1时 此时 content 可以时html字符串,也可以dom对象
// 当type为2时, 此时 content是一个url地址
content:"<div>内容</div>",
//skin:'layui-layer-lan',//主题色
area:['500px','500px'],//设置弹出层的宽高
//offset:'rb',// 弹层的位置
btn:['按钮1','按钮2','按钮3','按钮4'],//自定义按钮
btnAlign: 'c',//按钮排列方式
closeBtn :1, // 关闭按钮 1,2 2种, 0 表示没有关闭按钮
shade :[0.8, '#393D49'],// 透明度 颜色
shadeClose :true,// 点击遮罩层是否关闭
id:'layerId1',// 弹层唯一标识
anim:6, // 动画效果
//isOutAnim :false,// 关闭时的动画
maxmin:true,//最小最大化
fixed :true,// 固定弹层的位置
resize:false,// 是否允许改变弹层大小
//move:false, //是否允许拖动 false 不允许拖动
moveOut:true, //是否允许拖动到窗口外
success:function(layero, index){//弹层 成功弹出调用的方法
console.log("success");
},
yes: function(index, layero){ //点击确认按钮触发的方法
console.log("yes");
},
cancel: function(index, layero){//点击关闭按钮触发的方法
console.log("cancel");
},
end: function(index, layero){//弹层销毁触发的方法
console.log("end");
},
btn2: function(index, layero){//为按钮绑定事件
layer.msg("按钮2");
//阻止弹层自动关闭
return false;
}
,btn3: function(index, layero){
layer.msg("按钮3");
}
,btn4: function(index, layero){
layer.msg("按钮4");
}
});
}); // 弹出信息框
$("#btn4").click(function(){
layer.alert("显示内容",{"icon":9},function(index){
console.log("点击了确定");
//关闭弹层
layer.close(index);
});
});
// 弹出询问框
$("#btn5").click(function(){
layer.confirm("确定要删除吗?",{"icon":6},function(index){
console.log("点击了确定");
//关闭弹层
layer.close(index);
});
});
// 弹出提示框
$("#btn6").click(function(){
layer.msg("确定要删除吗?",{"icon":6},function(index){
console.log("消失了");
});
}); });
</script>
</body>
</html>
LayUI笔记的更多相关文章
- layui 笔记
弹出层 点击事件 <!DOCTYPE html> <html> <head> <title></title> {load href=&quo ...
- 学习Layui笔记-父窗口获取子窗口的radio
最近学习layui,使用radio做单项选择的时候,发现layui无论怎么取值,都是默认取到第一个radio的值. 百度下找解决方法. html页面部分 <div class="lay ...
- layui confirm 嵌套使用 (随笔记)
使用layui confirm时不要使用aspx控件,使用html的button按钮 借用一下 官方例子 layer.confirm('您是如何看待前端开发?', { btn: ['重要', '奇葩' ...
- layui 学习笔记一:layui table 查询、新增、编辑、删除
一.table数据的呈现(对应查询) 页面代码: @{ ViewBag.Title = "TableGrid"; } @section styles{ <link href= ...
- Layui学习笔记(一)—— 关于模块的扩展
在使用layui的时候,总有官方自带模块不够用想自己扩展的时候,这时候我们就需要扩展模块了. 模块扩展有两种: (一)普通地扩展 layui.define( function (exports) { ...
- springboot学习笔记:8. springboot+druid+mysql+mybatis+通用mapper+pagehelper+mybatis-generator+freemarker+layui
前言: 开发环境:IDEA+jdk1.8+windows10 目标:使用springboot整合druid数据源+mysql+mybatis+通用mapper插件+pagehelper插件+mybat ...
- springboot学习笔记:11.springboot+shiro+mysql+mybatis(通用mapper)+freemarker+ztree+layui实现通用的java后台管理系统(权限管理+用户管理+菜单管理)
一.前言 经过前10篇文章,我们已经可以快速搭建一个springboot的web项目: 今天,我们在上一节基础上继续集成shiro框架,实现一个可以通用的后台管理系统:包括用户管理,角色管理,菜单管理 ...
- springboot学习笔记:5.spring mvc(含FreeMarker+layui整合)
Spring Web MVC框架(通常简称为"Spring MVC")是一个富"模型,视图,控制器"的web框架. Spring MVC允许你创建特定的@Con ...
- 【踩坑笔记】layui之单选和复选框不显示
直接上代码,下面前端页面代码,使用layui框架: <div class="layui-form-item"> <div class="lay ...
随机推荐
- hive on tez 错误记录
1.执行过程失败,报 Container killed on request. Exit code is 143 如下图: 分析:造成这种原因是由于总内存不多,而容器在jvm中占比过高,修改tez-s ...
- Java 面向对象(五)
包装类 什么是包装类 在面向对象当中"一切皆对象".基本数据类型变量不是对象,比如 int a = 10; 当中就没有对象,所以就很矛盾.此时我们就可以对基本数据类型进行包装,把基 ...
- Microsoft Visual C++ 2017 Redistributable
版本:14.10.25008https://download.microsoft.com/download/4/5/4/454AC59C-DC3F-4AD3-950F-6DCBDF672071/vc_ ...
- linux下如何让控制台程序后台运行
方法1:./test & 方法2:(./test &) 方法3:nohup 和bg 方法4:screen -mS test /root/test 退出程序需要手动进入screen创 ...
- arcgis python 使用光标和内存中的要素类将数据加载到要素集 学习:http://zhihu.esrichina.com.cn/article/634
学习:http://zhihu.esrichina.com.cn/article/634使用光标和内存中的要素类将数据加载到要素集 import arcpy arcpy.env.overwriteOu ...
- docker tcp配置
1. Ubuntu Docker deamon监听tcp端口设置 https://www.jianshu.com/p/e278b0e44e1b 2. Centos https://www.cnblog ...
- eclipse导入maven项目有红叉及pom.xml出错的问题的解决
导入我们的项目的时候总会出现很多红叉,看着很难受,其实可以解决的(本人使用方法一解决)解决方法:1.先build project,然后右键项目->maven->update project ...
- Android简单实现滚动悬停效果
import android.content.Context; import android.support.design.widget.TabLayout; import android.suppo ...
- Java中声明泛型方法
泛型是什么意思在这就不多说了,而Java中泛型类的定义也比较简单,例如:public class Test<T>{}.这样就定义了一个泛型类Test,在实例化该类时,必须指明泛型T的具体类 ...
- Qt自定义类重写 copy
PtsData PtsData::copy(const PtsData &ptsData) { PtsData ptsData1; ptsData1.data_b = ptsData.data ...