文章目录
引入layui的CSS和JS
先下载layui——https://layui.dev/
layui文档地址：https://layui.dev/docs/2/versions.html
下载以后把解压的文件夹放入项目中
引入css和js
<!-- 引入layui的CSS -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css" />
<!-- 引入layui的js，模块化 -->
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
弹出消息看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入layui的CSS -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css" />
<!-- 引入layui的js，模块化 -->
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script>
layui.use(['layer', 'form'], function() {
var layer = layui.layer;
var form = layui.form;
layer.msg('Hello World');
})
</script>
</body>
</html>
布局容器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局容器</title>
<!-- 引入layui的CSS -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css" />
<!-- 引入layui的js，模块化 -->
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
布局容器
1.固定宽度（两侧有留白效果）
2.完整宽度（占据屏幕100%）
-->
<div class="layui-container" style="background-color: yellow;height: 300px;">
固定宽度（两侧有留白效果）
</div>
<div class="layui-fluid" style="background-color: cyan;height: 300px;">
完整宽度(占据屏幕宽度的100%)
</div>
</body>
</html>
栅格系统
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>栅格系统</title>
<!-- 引入layui的CSS -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css" />
<!-- 引入layui的js，模块化 -->
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
栅格系统
列组合
1. 定义行 .layui-row
2. 定义列 .layui-col-md*
md 表示不同屏幕的标识（xs、sm、md、lg）
* 表示列的数量
3. 每一行被均分为12列，列的总数不能超过12，否则会自动换行
4. 响应式规则
栅格会自动根据屏幕的分辨率选择对应的样式效果。
列间距
layui-col-space*:
* 代表的是px值，1-30
列偏移：将列向右移动指定列数
layui-col-md-offset*：
* 代表的是列数，1 - 12
列嵌套
列之间可以无限嵌套
-->
<!-- 布局容器 -->
<div class="layui-container">
<!-- 定义行 -->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md5" style="background-color: deepskyblue;">
内容5/12
</div>
<div class="layui-col-md7" style="background-color: bisque;">
内容7/12
</div>
</div>
<!-- 定义行 -->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md4" style="background-color: powderblue;">
内容4/12
</div>
<div class="layui-col-md4" style="background-color: mediumaquamarine;">
内容4/12
</div>
<div class="layui-col-md6" style="background-color: grey;">
内容6/12
</div>
</div>
<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
<!-- 小屏幕占6列，中屏幕占4列 -->
<div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
平板≥768px：6/12 | 桌面端≥992px：4/12
</div>
</div>
<div class="layui-row">
<!-- 小屏幕占4列，中屏幕占6列 -->
<div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
平板≥768px：4/12 | 桌面端≥992px：6/12
</div>
</div>
<div class="layui-row">
<!-- 小屏幕占12列，中屏幕占8列 -->
<div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
平板≥768px：12/12 | 桌面端≥992px：8/12
</div>
</div>
<hr>
<!-- 列边距 .layui-col-space* -->
<h3>列边距</h3>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<!-- 给具体的内容设置背景颜色 -->
<div style="background-color: hotpink">4</div>
</div>
<div class="layui-col-md4">
<div style="background-color: indianred">4</div>
</div>
<div class="layui-col-md4">
<div style="background-color: powderblue">4</div>
</div>
</div>
<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4">
<div style="background-color: red">4</div>
</div>
<!--向右移动4列-->
<div class="layui-col-md4 layui-col-md-offset4">
<div style="background-color: skyblue">
向右移动4列
</div>
</div>
</div>
<h3>列嵌套</h3>
<div class="layui-row">
<!-- 大的盒子占6列 -->
<div class="layui-col-md6">
<div style="background-color: red">
<div class="layui-row">
<!-- 嵌套列 -->
<div class="layui-col-md3" style="background-color: burlywood;">
内部列
</div>
<div class="layui-col-md5" style="background-color: indianred;">
内部列
</div>
<div class="layui-col-md2" style="background-color: mediumaquamarine;">
内部列
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮</title>
<!-- 引入layui的CSS -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css" />
<!-- 引入layui的js，模块化 -->
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
按钮
向任意HTML元素设定class="layui-btn"，建立一个基础按钮
通过追加格式为layui-btn-{type}的class来定义其它按钮风格
-->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="https://www.baidu.com" class="layui-btn">一个可跳转的按钮</a>
<hr/>
<!-- 不同主题按钮 -->
<button type="button" class="layui-btn layui-btn-primary">原始</button>
<button type="button" class="layui-btn">默认</button>
<button type="button" class="layui-btn layui-btn-normal">百搭</button>
<button type="button" class="layui-btn layui-btn-warm">暖色</button>
<button type="button" class="layui-btn layui-btn-danger">警告</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用</button>
<hr/>
<!-- 不同尺寸按钮 -->
<button type="button" class="layui-btn layui-btn-lg">大型</button>
<button type="button" class="layui-btn">默认</button>
<button type="button" class="layui-btn layui-btn-sm">小型</button>
<button type="button" class="layui-btn layui-btn-xs">迷你</button>
<hr/>
<!-- 圆角按钮 -->
<button type="button" class="layui-btn layui-btn-primary layui-btn layui-btn-radius">原始</button>
<button type="button" class="layui-btn layui-btn layui-btn-radius">默认</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn layui-btn-radius">百搭</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn layui-btn-radius">暖色</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn layui-btn-radius">警告</button>
<button type="button" class="layui-btn layui-btn-disabled layui-btn layui-btn-radius">禁用</button>
<hr/>
<!-- 图标按钮 -->
<button type="button" class="layui-btn">
<i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon layui-icon-left"></i>
</button>
</body>
</html>
导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<link rel="stylesheet" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
水平导航 layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示的是二级菜单
水平导航 layui-nav
垂直导航 layui-nav-tree
侧边导航 layui-nav-tree layui-nav-side
导航背景色
//如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">
…
</ul>
水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）
面包屑导航
layui-breadcrumb
通过设置属性 lay-separator="-" 来自定义分隔符,可选
-->
<!-- 水平导航 -->
<ul class="layui-nav" lay-filter="test">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品 <span class="layui-badge">6</span></a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<!-- 面包屑导航 -->
<span class="layui-breadcrumb" >
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<script type="text/javascript">
layui.use('element',function(){
// 导航依赖element模块
var element=layui.element;
})
</script>
</body>
</html>
选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<link rel="stylesheet" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
选项卡
默认风格：class="layui-tab"
简洁风格：class="layui-tab layui-tab-brief"
卡片风格：class="layui-tab layui-tab-card"
选项卡删除
父层容器设置属性 lay-allowClose="true"
-->
<!-- 默认风格 -->
<div class="layui-tab">
<!-- 设置选项卡标题 .layui-tab-title -->
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<!-- 设置选项卡的内容 .layui-tab-content -->
<div class="layui-tab-content">
<!-- 默认显示 layui-show -->
<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>
<hr>
<!-- 简洁风格 -->
<div class="layui-tab layui-tab-brief">
<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>
<hr>
<!-- 卡片风格 -->
<div class="layui-tab layui-tab-card">
<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>
<!-- 选项卡删除，父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除 -->
<div class="layui-tab" lay-allowClose="true">
<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 class="layui-tab-item">6</div>
</div>
</div>
<!-- 选项卡嵌套 -->
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">资质审核</li>
<li>办理记录</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-tab">
<span>资质审核</span>
<ul class="layui-tab-title">
<li class="layui-this data-list">待审核</li>
<li class="data-list">已审核</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-this">
待审核待审核待审核待审核待审核待审核
</div>
<div class="layui-tab-item">
已审核
</div>
</div>
</div>
</div>
<div class="layui-tab-item">
<span>办理记录</span>
<ul class="layui-tab-title">
<li class="layui-this data-list">待办理</li>
<li class="data-list">已办理</li>
</ul>
</div>
</div>
</div>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function() {
var element = layui.element;
//…
});
</script>
</body>
</html>
下拉dropdown
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link href="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="ID-table-demo-editmodes"></table>
<!-- 推荐 -->
<script type="text/html" id="TPL-dropdpwn-demo">
<button class="layui-btn layui-btn-primary dropdpwn-demo">
<span>{{= d.sex || '保密' }}</span>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/layui.min.js"></script>
<script>
layui.use(function(){
var $ = layui.$;
var table = layui.table;
var form = layui.form;
var dropdown = layui.dropdown;
var laydate = layui.laydate;
var colorpicker = layui.colorpicker;
// 渲染
table.render({
elem: '#ID-table-demo-editmodes', //table的id
url: './static/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
css: [ // 设置单元格样式
// 取消默认的溢出隐藏，并设置适当高度
'.layui-table-cell{height: 50px; line-height: 40px;}',
'.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
'.layui-table-cell select{height: 36px; padding: 0 5px;}'
].join(''),
cols: [[ // 表头
{field: 'sex', title: 'dropdown', width:115, unresize: true, align: 'center', templet: '#TPL-dropdpwn-demo'},
]],
done: function(res, curr, count){
var options = this;
// 获取当前行数据
table.getRowData = function(tableId, elem){
var index = $(elem).closest('tr').data('index');
return table.cache[tableId][index] || {};
};
// layui form select 事件
form.on('select(select-demo)', function(obj){
console.log(obj); // 获取选中项数据
// 获取当前行数据(如 id 等字段，以作为数据修改的索引)
var data = table.getRowData(options.id, obj.elem);
// 更新数据中对应的字段
data.city = value;
console.log(data);
});
// dropdown 方式的下拉选择
dropdown.render({
elem: '.dropdpwn-demo', //下拉的button的id
// trigger: 'hover',
// 此处的 data 值，可根据 done 返回的 res 遍历来赋值
data: [{
title: '男',
id: 100
},{
title: '女',
id: 101
},{
title: '保密',
id: 102
}],
click: function(obj){ //下拉点击项触发事件
var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
this.elem.find('span').html(obj.title);
// 更新数据中对应的字段
data.sex = obj.title;
// 显示 - 仅用于演示
layer.msg('选中值: '+ obj.title +'<br>当前行数据：'+ JSON.stringify(data));
}
});
// laydate
laydate.render({
elem: '.laydate-demo',
done: function(value, date, endDate){
var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
// 更新数据中对应的字段
data.date = value;
// 显示 - 仅用于演示
layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
}
});
// colorpicker
colorpicker.render({
elem: '.colorpicker-demo',
done: function(value){
var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
// 更新数据中对应的字段
data.color = value;
// 显示 - 仅用于演示
layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
}
});
// 单元格普通编辑事件
table.on('edit(ID-table-demo-editmodes)', function(obj){
var value = obj.value // 得到修改后的值
var data = obj.data // 得到所在行所有键值
var field = obj.field; // 得到字段
// 更新数据中对应的字段
var update = {};
update[field] = value;
obj.update(update);
// 编辑后续操作，如提交更新请求，以完成真实的数据更新
// …
// 显示 - 仅用于演示
layer.msg('编辑值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
});
// 更多编辑方式……
}
});
});
</script>
</body>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<link rel="stylesheet" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
表格
class="layui-table"
常用属性
lay-even：用于开启 隔行 背景，可与其它属性一起使用
边框风格
lay-skin="属性值" 若使用默认风格不设置该属性即可
line （行边框风格）
row （列边框风格）
nob （无边框风格）
尺寸
lay-size="属性值" 若使用默认尺寸不设置该属性即可
sm （小尺寸）
lg （大尺寸）
-->
<table class="layui-table" >
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
<hr>
<!-- 隔行变色、行边框风格、大尺寸 -->
<table class="layui-table" lay-even lay-skin="line" lay-size="lg">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<link rel="stylesheet" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
表单
常用属性：
required：必填字段
lay-reqText:自定义必填项的提示
lay-verify：需要验证的类型，required表示必填项
class="layui-input"：layui.css提供的通用CSS类
class="layui-input-block"：占据全部宽度
class="layui-input-inline"：占据部分宽度
文本框
placeholder 文本框为空时的显示
autocomplete 表单元素是否填充（浏览器缓存中存在相同name属性的值时，会自动填充）
-->
<!-- 在一个容器中设定 class="layui-form" 来标识一个表单元素块 -->
<form action="" class="layui-form">
<!-- 基本的行区块结构，它提供了响应式的支持。-->
<div class="layui-form-item">
<label class="layui-form-label">标题区域</label>
<div class="layui-input-inline">
<!-- 输入框 -->
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
lay-reqText="标题不能为空" autocomplete="off" class="layui-input" />
</div>
</div>
<!--
下拉选择框
1.selected:默认选中项
2.disabled：开启禁用，select和option标签都支持
3.通过 optgroup 标签给select分组
4.通过设定属性 lay-search 来开启搜索匹配功能
-->
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-inline">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0" selected>北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
<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>
<!--
复选框
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格(lay-skin="primary":原始效果)
设置value="1"可自定义值，否则选中时返回的就是默认的on
-->
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<!-- 默认效果 -->
<input type="checkbox" name="1" title="写作" checked value="write">
<input type="checkbox" name="1" title="发呆">
<input type="checkbox" name="1" title="禁用" disabled>
<br>
<!-- 原始效果 -->
<input type="checkbox" name="2" title="写作" lay-skin="primary">
<input type="checkbox" name="2" title="发呆" lay-skin="primary">
<input type="checkbox" name="2" title="禁用" lay-skin="primary">
</div>
</div>
<!--
开关
checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本, | 分隔
设置value="1"可自定义值，否则选中时返回的就是默认的on
-->
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="" lay-text="on|off" lay-skin="switch">
</div>
<div class="layui-input-block">
<input type="checkbox" name="" lay-text="on|off" lay-skin="switch" disabled>
</div>
<div class="layui-input-block">
<input type="checkbox" name="" lay-text="on|off" lay-skin="switch" checked>
</div>
</div>
<!--
单选框
属性checked可设定默认开
属性disabled开启禁用
属性value选中项的值
-->
<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>
<!--
文本域
class="layui-textarea"：layui.css提供的通用CSS类
-->
<div class="layui-form-item">
<label class="layui-form-label">简介</label>
<div class="layui-input-block">
<textarea name="" required lay-verify="required" placeholder="请输入"
class="layui-textarea"></textarea>
</div>
</div>
<!--
组装行内表单
class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内
-->
<div class="layui-form-item">
<!-- 定义外层行内 -->
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</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="男" lay-ignore>
<input type="radio" name="sex" value="nv" title="女" checked>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!--
表单方框风格
通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变
-->
<form class="layui-form layui-form-pane" action="">
<!-- 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如： -->
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
</form>
<script type="text/javascript">
// 表单 依赖form模块
layui.use('form', function() {
var form = layui.form;
});
</script>
</body>
</html>
弹出层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出层</title>
<!-- 作为独立组件使用 -->
<!-- <link rel="stylesheet" href="layer/layer.css" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script> -->
<!-- layui模块化使用 -->
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
两种使用方式
1.作为独立组件使用，在需要使用的页面加载jquery.js和layer.js
2.layui模块化使用，
只需要引入layui的css和js文件，在script中使用layui.use()加载模块
-->
<span id="2">1</span>
<span id="2">2</span>
<span id="3">3</span>
<span id="4">4</span>
</span>
<script>
layui.use('layer', function() {
var layer = layui.layer;
// layer.msg('hello');
// 页面层
/* layer.open({
type: 1,
content: '<span style="color:red">123</span>' //这里content是一个普通的String
}); */
/* layer.open({
type: 2,
content: 'http://www.baidu.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); */
/*
content内容
type:layer提供了5种层类型。
可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
title - 标题
title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；
若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；
如果你不想显示标题栏，你可以title: false
content - 内容
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
*/
/* layer.open({
type: 0,
content: '传入任意的文本或html', //这里content是一个普通的String
area: '500px' //默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']
}); */
// tips层
/* layer.open({
type: 4,
content: ['内容', '#4'] //数组第二项即吸附元素选择器或者DOM
}); */
/*
icon图标
//eg1
layer.alert('酷毙了', {icon: 1});
//eg2
layer.msg('不开心。。', {icon: 5});
//eg3
layer.load(1); //风格1的加载 */
/* layer.msg('你愿意和我做朋友么？', {
time: 0, //不自动关闭
btn: ['当然愿意', '狠心拒绝'], // [按钮1,按钮2]
// 按钮1的回调函数
yes: function(index) {
layer.close(index); // 关闭当前弹出框
layer.msg('新朋友，你好！', {
icon: 6, // 图标
btn: ['开心', '快乐'],
yes:function(index){
layer.close(index);
layer.msg('开心',{icon:1})
},
btn2:function(index){
layer.close(index);
layer.msg('不开心。。', {icon: 5});
}
});
},
// 按钮2的回调函数
btn2: function(index) {
layer.close(index); // 关闭当前弹出框
layer.msg('好吧,再见!', {
icon: 5,
btn: '88'
})
}
}); */
layer.msg('加载中',function( ){
layer.msg('加载完成');
})
});
</script>
</body>
</html>
日期与时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期与时间</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="layui-inline">
<!-- 注意：这一层元素并不是必须的 -->
<input type="text" class="layui-input" id="test1">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="test2">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="test3">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="test4">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="test5">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="test6">
</div>
<hr>
<div class="layui-inline">
<input type="text" class="layui-input" id="test7">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="test8">
</div>
<div class="layui-inline">
<input type="text" class="layui-input" id="test9">
</div>
<script>
layui.use('laydate', function() {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1' //指定元素
});
laydate.render({
elem: '#test2', //指定元素
type: 'year'
});
laydate.render({
elem: '#test3', //指定元素
type: 'month'
});
laydate.render({
elem: '#test4', //指定元素
type: 'date'
});
laydate.render({
elem: '#test5', //指定元素
type: 'time'
});
laydate.render({
elem: '#test6', //指定元素
type: 'datetime'
});
laydate.render({
elem: '#test7', //指定元素
format: 'yyyy年MM月dd日' //format自定义格式
});
laydate.render({
elem: '#test8', //指定元素
value: '2018-08-18' //必须遵循format参数设定的格式
});
laydate.render({
elem: '#test9', //指定元素
value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});
});
</script>
</body>
</html>
分页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="test1"></div>
<script>
layui.use('laypage', function() {
var laypage = layui.laypage;
//执行一个laypage实例
/* laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: 100 //数据总数，从服务端得到
,limits:[10, 20, 30, 40, 50] // 每页条数的选择项
,layout: ['prev', 'page', 'next', 'limit', 'skip', 'count', 'refresh'] //自定义排版
//自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）
, groups: 7 // 连续显示的页码数
});*/
/**
* 切换分页的回调
*/
laypage.render({
elem: 'test1',
count: 100, //数据总数，从服务端得到
groups: 10, // 连续出现的页码个数
layout: ['prev', 'page', 'next', 'limit', 'count'], // 自定义排版
limits: [5, 10, 20], // layout属性设置了limit值，可会出现条数下拉选择框
jump: function(obj, first) {
// obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
//do something
console.log('首次不执行');
}
}
});
});
</script>
</body>
</html>
数据表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
<!-- 方法渲染 -->
<!-- 准备容器（标签） 设置id -->
<table id="demo" lay-filter="test"></table>
<!--
自动渲染
1) 带有 class="layui-table" 的 <table> 标签。
2) 对标签设置属性 lay-data="" 用于配置一些基础参数
3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息
-->
<table class="layui-table" lay-data="{height:315, url: 'js/user.json', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">签名</th>
<th lay-data="{field:'experience', sort: true}">积分</th>
<th lay-data="{field:'score', sort: true}">评分</th>
<th lay-data="{field:'classify'}">职业</th>
<th lay-data="{field:'wealth', sort: true}">财富</th>
</tr>
</thead>
</table>
<!-- 转换成静态表格 -->
<table lay-filter="demo2">
<thead>
<tr>
<th lay-data="{field:'username', width:100}">昵称</th>
<th lay-data="{field:'experience', width:80, sort:true}">积分</th>
<th lay-data="{field:'sign'}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>66</td>
<td>人生就像是一场修行a</td>
</tr>
<tr>
<td>贤心2</td>
<td>88</td>
<td>人生就像是一场修行b</td>
</tr>
<tr>
<td>贤心3</td>
<td>33</td>
<td>人生就像是一场修行c</td>
</tr>
</tbody>
</table>
<script>
// 加载table模块
layui.use('table', function() {
var table = layui.table;
var $ = layui.jquery;
// 方法渲染
//加载table实例
table.render({
elem: '#demo', //绑定属性Id值
height: 312,
toolbar: '#toolbarDemo', // 设置表格工具栏
url: 'js/user.json' //数据接口
,
page: true //开启分页
,
cols: [
[ //表头,
// 设置序列号
{
field: 'aa',
type: "numbers"
},
// 设置复选框列
{
field: 'bb',
type: "checkbox"
}, {
field: 'id',
title: 'ID',
width: 80,
sort: true,
// fixed: 'left' //固定在最左边
}, {
field: 'username',
title: '用户名',
width: 80,
edit: 'text'
}, {
field: 'sex',
title: '性别',
width: 80,
sort: true
}, {
field: 'city',
title: '城市',
width: 80
}, {
field: 'sign',
title: '签名',
width: 177
},
// 设置表头工具栏
{
field: "操作",
toolbar: "#barDemo"
}
]
]
});
//转换静态表格
table.init('demo2', {
height: 315 //设置高度
,
limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
//支持所有基础参数
});
//触发事件
/**
* 头监听事件
* 语法：
* table.on('toolbar(demo)',function(obj){
});
注:demo表示的是容器上设置的lay-filter属性值
*/
table.on('toolbar(test)', function(obj) {
// obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是demo
// 获取当前表格被选中记录对象，返回数据
var checkStatus = table.checkStatus(obj.config.id);
console.log(checkStatus);
// 获取事件名
var eventName = obj.event;
// 判断事件名，执行对应的代码
switch (eventName) {
case 'add':
layer.msg('添加');
// 获取被选中的记录的数组
var arr = checkStatus.data;
// 将数组解析成字符串
layer.alert(JSON.stringify(arr));
break;
case 'delete':
layer.msg('删除');
break;
case 'update':
layer.msg('编辑');
break;
};
// 通过isAll属性判断是否全选
/* var flag = checkStatus.isAll;
var str = flag ? '全选' : '未全选';
layer.msg(str); */
});
/**
* 监听行工具栏事件
*/
/* table.on('tool(test)', function(obj) {
// 得到当前操作行的相关信息
var tr = obj.data;
console.log(tr);
// 得到事件名
var eventName = obj.event;
// 判断事件名，执行对应的方法
if (eventName == 'del') { // 删除
// 确认框
layer.confirm("您确认要删除吗？", function(index) {
// 删除指定tr del()
obj.del();
// 关闭弹出层（index是当前弹出层的下标）
layer.close(index);
});
} else if (eventName == 'edit') { // 编辑
// 输出框
layer.prompt({
// 表单元素的类型 0=文本框 1=密码框 2=文本域
formType: 0,
value: tr.username // 设置输入框的值
}, function(value, index) {
// 修改指定单元格的值
// value表示输入的值
obj.update({
username: value
});
// 关闭弹出层
layer.close(index);
});
}
}); */
/**
* 监听单元格编辑事件
* 表头设置edit属性， 单元格编辑类型（默认不开启）目前只支持：text（输入框）
* edit:'text'
*/
table.on('edit(test)', function(obj) {
console.log(obj);
// 获取修改后的值
var value = obj.value;
// 得到当前修改的tr对象
var data = obj.data;
// 得到修改的字段名
var field = obj.field;
layer.msg("【ID:" + data.id + "】的" + field + "字段的值修改为：" + value);
});
// 给指定元素绑定事件
$(document).on('click', '#searchBtn', function(data) {
// 获取搜索文本框对象
var sreach = $("#demoReload");
// 调用数据表格的重载方法 table.reload(ID, options)
table.reload('demo', {
where: { // 设置需要传递的参数
id: sreach.val(),
name: "zhangsan"
},
page: {
// 表示让条件查询从第一页开始；如果未设置则从当前页开始查询，此页前面的所有数据不纳入条件筛选
curr: 1 // 从第一页开始
}
});
})
});
</script>
<!-- 工具栏模板 -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
</div>
</script>
<!-- 表头工具栏 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>
laytpl
laytpl 是 Layui 的一款轻量 JavaScript 模板引擎，在字符解析上有着比较出色的表现。
{{# 内容 }}，{{#}}是外层标签，里面写的是表达式，以下是个if判断示例，更多示例：https://layui.dev/docs/2/laytpl/#test
d为渲染的数据
<script type="text/html" id="level">
{{# if (d.action=='新闻浏览'){ }} // 相当于 if(){
<span>三级报警</span>
{{# }else if(d.action=='点赞'){ }} // 相当于 }else if(){
<span>四级报警</span>
{{# }else if(d.action=='审稿'){ }} // 相当于 }else if(){
<span>五级报警</span>
{{# } else{ }} // 相当于 }else{
<span>四级报警</span>
{{# } }} // 相当于 }
</script>
let cols = [
{
title: '等级',
align: 'center',
templet: '#level' // 引入<script type="text/html" id="level">
}
]
d代表的是行数据，每行的每个对象
本地存储
键值对的形式，两种存储类型： localStorage 和 sessionStorage
localStorage 持久化存储：layui.data(table, settings)，数据会永久存在，除非物理删除。
sessionStorage 会话性存储：layui.sessionData(table, settings)，页面关闭后即失效。注：layui 2.2.5 新增
- 存值
以键值对的形式，可以嵌套多层，就是一个json,
layui.data('user', {
key: 'token'
, value: {
name: data.data.tokenName,
value: data.data.tokenValue
}
});
如果key不存在，就是新增
如果key存在了，就是修改
如果是多层key、value这种，也是一样的，先对比key，然后对比value，然后再对比value里面的key，写个例子试试就知道了
- 取值
layui.data(key)
也可以直接通过对象获取
var name= layui.data('user').name;
var value=layui.data('user').value;
- 清空值
删除整个key，最外层的
layui.data(key,null)
通过某个key，删除指定值，一般是多层嵌套的情况用
//删除user中的key为token1的值
layui.data('user',{key:'token1',remove:true})
其它
静态表格lay-data无效
静态的表格，转换之前lay-data都是无效的
<!-- 转换成静态表格 -->
<table class="layui-table">
<thead>
<tr>
//lay-data属性
<th lay-data="{type:'numbers'}"></th>
<th lay-data="{field:'username', width:100}">昵称</th>
<th lay-data="{field:'experience', width:80, sort:true}">积分</th>
<th lay-data="{field:'sign'}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>66</td>
<td>人生就像是一场修行a</td>
</tr>
<tr>
<td>贤心2</td>
<td>88</td>
<td>人生就像是一场修行b</td>
</tr>
<tr>
<td>贤心3</td>
<td>33</td>
<td>人生就像是一场修行c</td>
</tr>
</tbody>
</table>
序号列和宽度没有生效
转换静态表格
<!-- 转换成静态表格 -->
<table class="layui-table" lay-filter="demo2">
<thead>
<tr>
<th lay-data="{type:'numbers'}"></th>
<th lay-data="{field:'username', width:100}">昵称</th>
<th lay-data="{field:'experience', width:80, sort:true}">积分</th>
<th lay-data="{field:'sign'}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>66</td>
<td>人生就像是一场修行a</td>
</tr>
<tr>
<td>贤心2</td>
<td>88</td>
<td>人生就像是一场修行b</td>
</tr>
<tr>
<td>贤心3</td>
<td>33</td>
<td>人生就像是一场修行c</td>
</tr>
</tbody>
</table>
<script>
layui.use('table', function() {
var table = layui.table;
//转换静态表格
table.init('demo2', {
height: 315 //设置高度
,
limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
//支持所有基础参数
});
})
</script>
lay-data生效了
设置数据表格某条数据选中
<script>
//获取table
var table=layui.table;
//获取id为bd_table的table数据
var tabledata = table.cache["bd_table"];
//下标从0开始，设置下标为1的数据为选中，LAY_CHECKED = true
tabledata[1].LAY_CHECKED = true;
//表格重载
table.reload("bd_table", {
data: tabledata,
})
</script>
禁止点击单选或复选框
单选复选框都在input设置样式
<script>
//静态表格转化
table.init('bd_table', {
height: 315 //设置高度
,
limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
//支持所有基础参数
,done: function (res) {
var table_data = res.data;
//设置表头，不加attr('name', 'layTableCheckbox_disabled')，点击会取消已选中的数据
$('.layui-table th input[type="checkbox"]').prop('disabled', true).attr('name', 'layTableCheckbox_disabled');
//这个属性设置禁止点击的样式，一个红色的
$(".layui-table th input[type='checkbox']").next().addClass('layui-checkbox-disabled layui-disabled');
//循环数据，循环设置指定数据的禁止点击
for (let i = 0; i < table_data.length; i++) {
//下标
var index = table_data[i]['LAY_TABLE_INDEX'];
//禁止指定下标的点击
$(".layui-table tr[data-index=" + index + "] input[type='checkbox']").prop('disabled', true); //禁止部分选择
//设置禁止点击的样式，一个红色的
$(".layui-table tr[data-index=" + index + "] input[type='checkbox']").next().addClass('layui-checkbox-disabled layui-disabled');
}
}
});
</script>
//设置表头，不加attr('name', 'layTableCheckbox_disabled')，点击会取消已选中的数据,
//加了以后就不会出现这个问题
$('.layui-table th input[type="checkbox"]')
.prop('disabled', true)
.attr('name', 'layTableCheckbox_disabled');
关闭iframe父页面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
刷新弹窗父页面
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
parent.location.reload();
修改单元格field的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css" href="layui-v2.7.6/layui/css/layui.css">
<script src="layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button class="alink">123</button>
<!-- 转换成静态表格 -->
<table lay-filter="demo2">
<thead>
<tr>
<th lay-data="{field:'username', width:100}">昵称</th>
<th lay-data="{field:'operate'}"></th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td></td>
</tr>
<tr>
<td>贤心2</td>
<td></td>
</tr>
<tr>
<td>贤心3</td>
<td><button lay-event="change">aa</button></td>
</tr>
</tbody>
</table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="change">编辑</a>
</script>
<script>
// 加载table模块
layui.use('table', function() {
var table = layui.table;
var $ = layui.jquery;
$(".alink").on("click", function () {
var tableData=table.cache;
//输出所有数据
console.log(tableData);
})
// 单元格工具事件
// 和 lay-filter为 demo2 的表格绑定
table.on('tool(demo2)', function(obj){
var layEvent = obj.event;
// 判断点击行的 lay-event 属性
if(layEvent === 'change') {
//修改 username 的值为 123
obj.update({
username: '123'
}, true); //
}
})
//转换静态表格
table.init('demo2', {
height: 315 //设置高度
,
limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
//支持所有基础参数
});
});
</script>
</body>
</html>
表单主动验证
方法：form.validate(elem); 若验证通过返回 true，否则 false
elem为验证的区域选择器或 DOM 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单模块 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
</head>
<body>
<h1>主动验证测试</h1>
<form id="testVerify" action="" layui-form>
<input type="text" name="name" lay-verify="required">
<input type="text" name="age" lay-verify="required">
</form>
<button id="enterButton">确定</button>
<script>
layui.use('form', function(){
var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
,form = layui.form;
$(document).ready(function () {
$("body").on("click", "#enterButton", function () {
//console.log(form.validate('input[name="name"]'));
console.log(form.validate('#testVerify'));
})
})
});
</script>
</body>
</html>
自定义验证
重写phone的验证规则
var form = layui.form;
form.verify({
phone: function (value, item) {
console.log(item);
var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
if(!reg.test(value)){
return '请输入正确电话号码1111';
}
},
});
原有的phone效果<input type="text" lay-verify="required|phone|number">效果，只是检测电话号码是否11位，并不能判断是否133,138这种，需要重写phone的验证规则，或者重新写一个，然后加在lay-verify中
分页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>分页 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 10px;}
</style>
</head>
<body>
<div id="demo9"></div>
<ul id="biuuu_city_list"></ul>
<script src="../src/layui.js"></script>
<script>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//将一段数组分页展示
//测试数据
var data = [
'北京',
'上海',
'广州',
'深圳',
'杭州',
'长沙',
'合肥',
'宁夏',
'成都',
'西安',
'南昌',
'上饶',
'沈阳',
'济南',
'厦门',
'福州',
'九江',
'宜春',
'赣州',
'宁波',
'绍兴',
'无锡',
'苏州',
'徐州',
'东莞',
'佛山',
'中山',
'成都',
'武汉',
'青岛',
'天津',
'重庆',
'南京',
'九江',
'香港',
'澳门',
'台北'
];
//调用分页
laypage.render({
elem: 'demo9'
,count: data.length //数据总数量
,layout: ['prev', 'page', 'next', 'refresh', 'skip'] //自定义排版
,jump: function(obj){ //切换分页的回调
//模拟渲染，展示数据的容器 DOM
document.getElementById('biuuu_city_list').innerHTML = function(){
var arr = [] //要展示的数据
,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit); //获取数据，obj.curr：第几页，obj.limit：每页几条数据
layui.each(thisData, function(index, item){ //thisData当前页的数据，遍历thisData
arr.push('<li>'+ item +'</li>'); //每个数据都套一个li标签，然后加到要展示的数据 arr 中
});
return arr.join(''); //转换成字符串连接起来，默认是以 ，作为分隔符(1,2,3,4,5)，现在用''(12345)
}();
}
});
});
</script>
</body>
</html>
修改赋值不生效
在layui-form表单范围内，做任何操作，都要重新渲染form
form.render();
触发checkbox复选框勾选事件
<select lay-filter="test"></select>
form.on('checkbox(test)', function(data){
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('checkbox(seal${certIndex})', function(data){
var _this=$(this);
//选中复选框
var checkDatas=$("input:checkbox[name = 'checkbox']:checked");
//大于三个不让选中
if(checkDatas.length>3){
_this.attr("checked", false); //取消当前选中
layer.alert("最多选择3个", {icon: 2});
form.render();
return;
}
moneyResult();
form.render();
})
表单提交方法中，添加参数
先看下data提交的数据格式
直接通过.塞入值data.field.id=postId;
表格中的下拉框点击时，布局错位
问题：点击下拉时，整个布局往左偏移，取消下拉后，又恢复
下拉框内容撑起导致，可以调整下拉框高度，
// 渲染
dropdown.render({
elem: '.dropdpwn-demo', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
style: 'height: 150px;overflow-x:hidden;', //固定高度，再加上overflow-x:hidden，限制横向滚动条，不限制纵向滚动条
......
}）
返回的数据是个对象，取对象的属性展示
如果直接取属性的值，这样就可以
如果是要取对象中的属性的值，这样
field: ‘user.userName’,这行没用，可以直接删掉，主要是通过templet返回值，d代表的是行数据，一个个对象
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
