表单
加载模块：
<!-- 加载模块 -->
<script type="text/javascript">
//加载form模块
layui.use('form', function() {
var form = layui.form;
})
</script>
<!-- 在容器中设定class="layui-form" 来标识一个表单元素 -->
<!--
required:表示该处为必填字段
autocomplete="off"：表示是否自动填充（off不填充,on填充）根据表单名自动填充（当浏览器缓存中存在相同表单的名字的值时会自动填充），
lay-verify="格式"：表示验证输入的格式必须是指定格式
placeholder="":表示文本框为空时显示的默认字段
layui-input-block：占据全部宽度
layui-input-inline：占据部分宽度
-->
<form class="layui-form" action="" method="" style="margin: 20px;">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-inline">
<input type="text" name="text" required class="layui-input" lay-verify="" placeholder="请输入标题" autocomplete="off" />
</div>
</div>
</form>
required:表示该处为必填字段
autocomplete="off"：表示是否自动填充（off不填充,on填充）根据表单名自动填充（当浏览器缓存中存在相同表单的名字的值时会自动填充），
lay-verify="格式"：表示验证输入的格式必须是指定格式
placeholder="":表示文本框为空时显示的默认字段
layui-input-block：占据全部宽度
layui-input-inline：占据部分宽度
下拉列表：
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<!--
下拉选择框
1.通过selected属性设置默认选中项
2.通过disabled属性开启禁用，可以设置select和option标签禁用下拉框或下拉选项
3.可以通过optgroup标签给select分组
4.通过设定lay-search属性可以来开启搜索配匹功能
-->
<select name="puto">
<option value="0" disabled="disabled">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4" selected>深圳</option>
<option value="5" disabled="disabled">杭州</option>
</select>
<!-- optgroup分组 -->
<select name="group">
<option value="0" disabled="disabled">请选择城市</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市 ">你工作的第一个城市</option>
</optgroup>
<optgroup label="城市">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4" selected>深圳</option>
<option value="5" disabled="disabled">杭州</option>
</optgroup>
</select>
<!-- 开启搜索 -->
<select name="city" lay-verify="" lay-search>
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">杭州</option>
</select>
</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-block">
<!--
复选框:
1.通过title属性设置自定义文本(如果不需要显示文本，则无需设置title)
2.通过checked属性设置被选中项
3.通过lay-skin属性来设置复选框的样式效果(lay-skin="primary"表示原始效果复选框)
通过设定lay-skin="switch"形成开关风格
4.通过disabled属性来设置禁选元素
-->
<!-- 默认复选框 -->
<input type="checkbox" name="text1" title="唱歌" checked="checked" value="sin" />
<input type="checkbox" name="text1" title="跳舞" value="dance" />
<input type="checkbox" name="text1" title="rap" disabled="disabled" value="rap" />
<br />
<!-- 原始效果复选框 -->
<input type="checkbox" name="text2" title="唱歌" lay-skin="primary" disabled="disabled" value="sining" />
<input type="checkbox" name="text2" title="跳舞" lay-skin="primary" value="danceing" />
<input type="checkbox" name="text2" title="rap" lay-skin="primary" checked="checked" value="rapping" />
</div>
</div>
1.通过title属性设置自定义文本(如果不需要显示文本，则无需设置title)
2.通过checked属性设置被选中项
3.通过lay-skin属性来设置复选框的样式效果(lay-skin="primary"表示原始效果复选框)
通过设定lay-skin="switch"形成开关风格
4.通过disabled属性来设置禁选元素
开关：
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<!--
开关：
将复选框，设置lay-skin="switch"形成开关风格
1.通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过|线分隔
2.通过设定checked设置默认被打开
3.通过设定diisabled属性来禁用开关
4.通过value设置选中提交的值
-->
<input type="checkbox" name="a" lay-skin="switch" />
<input type="checkbox" name="b" lay-skin="switch" checked="checked" />
<input type="checkbox" name="c" lay-skin="switch" checked="checked" lay-text="开|关" value="打开" />
<input type="checkbox" name="d" lay-skin="switch" checked="checked" lay-text="on|off" disabled="disabled" />
</div>
</div>
将复选框，设置lay-skin="switch"形成开关风格
1.通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过|线分隔
2.通过设定checked设置默认被打开
3.通过设定disabled属性来禁用开关
4.通过value设置选中提交的值
单选框：
<div class="layui-form-item">
<label class="layui-form-label">单选框：</label>
<div class="layui-input-block">
<!--
单选框
1.通过设定checked设置默认被打开
2.通过设定diisabled属性来禁用单选框
3.通过value设置选中提交的值
-->
<input type="radio" name="sex" value="nan" title="男" />
<input type="radio" name="sex" value="nv" title="女" checked="checked" />
<input type="radio" name="sex" value="" title="中性" disabled="disabled" />
</div>
</div>
1.通过设定checked设置默认被打开
2.通过设定disabled属性来禁用单选框
3.通过value设置选中提交的值
文本域：
<div class="layui-form-item">
<label class="layui-form-label">文本域：</label>
<div class="layui-input-block">
<!--
文本域
class="layui-textarea"：layui.css提供的通用css类
-->
<textarea name="remark" required lay-verify="required" placeholder="请输入个人简介" class="layui-textarea"></textarea>
</div>
</div>
class="layui-textarea"：layui.css提供的通用css类
组装行内表单：
<!--
组装行内表单
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">
<!-- autocomplete="off"不让它自动填充 -->
<input type="text" name="input_price_min" placeholder="￥" autocomplete="off" class="layui-input"/>
</div>
<!-- 分隔符设定 -->
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<!-- autocomplete="off"不让它自动填充 -->
<input type="text" name="input_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="pas" placeholder="请输入密码" autocomplete="off" class="layui-input"/>
</div>
</div>
</div>
class="layui-inline"定义外层行内
class="layui-input-inline"定义内层行内
行内表单.png
忽略美化效果
<!-- 忽略美化效果 -->
<div class="layui-form-item">
<label class="layui-form-label">原始效果：</label>
<div class="layui-input-inline">
<!-- 可以对表单元素增加属性lay-ignore设置后，将不会对该标签进行美化渲染，即保留系统风格 -->
<input type="radio" name="sex" value="nan" title="男" lay-ignore/>
</div>
</div>
可以对表单元素增加属性lay-ignore设置后，将不会对该标签进行美化渲染，即保留系统风格
表单方框风格：
<!-- 通过追加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="checked"/>
</div>
</div>
</form>
通过追加layui-form-pane的class，来设定表单的方框风格
组件示例
弹出层：
模块加载名称：layer独立版本：layer.layui.com
<script type="text/javascript">
layui.use("layer", function() {
var layer=layui.layer;
layer.open({
……
})
})
</script>
基础层类型
type - 基本层类型:
类型：Number，默认：0
0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
title - 标题
类型：String/Array/Boolean，默认：'信息'
title支持三种类型的值:
若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；
若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；
如果你不想显示标题栏，你可以title: false
content - 内容
类型：String/DOM/Array，默认：''
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如
layer.open({
type: 1,
content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
type: 1,
content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
$.post('url', {}, function(str){
layer.open({
type: 1,
content: str //注意，如果str是object，那么需要字符拼接。
});
});
layer.open({
type: 2,
content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
layer.open({
type: 4,
content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});
area - 宽高
类型：String/Array，默认：'auto'
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']
icon - 图标。信息框和加载层的私有参数
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。如：
//eg1
layer.alert('酷毙了', {icon: 1});
//eg2
layer.msg('不开心。。', {icon: 5});
//eg3
layer.load(1); //风格1的加载
layer.msg('你愿意成为我的朋友莫？', {
time: 0, //不自动关闭
btn: ['当然愿意', '狠心拒绝'], //按钮
yes: function(index) { //index代表单曲弹出框的下标
layer.close(index); //关闭当前弹出层
layer.msg('新朋友，你好！', {
icon: 6, //图标
btn: ['开心', '快乐']
});
}
});
//第一个弹出层关闭了，会弹出第二弹出层
layer.msg('玩命加载中……',function(){
layer.msg('加载完成！')
});
日期与时间的选择
模块加载名称：laydate独立版本：http://www.layer.layui.com/laydate/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期与时间选择</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="layui-inline">
<input type="text" class="layui-input" id="date1" />
</div>
<script type="text/javascript">
//加载模块
layui.use("laydate", function() {
var laydate = layui.laydate;
//加载laydate的实例
laydate.render({
elem:"#date1",//绑定id为date的元素
//或 elem: document.getElementById('test')、elem: lay('#test') 等
type: 'month',
//type取值year、month、date(type默认值，一般可不填)、time、datetime
});
})
</script>
</body>
</html>
range - 开启左右面板范围选择
类型：Boolean/String，默认值：false
format - 自定义格式
类型：String，默认值：yyyy-MM-dd
通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
时间format格式
数据表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 方法渲染 -->
<!-- 准备标签，设置id属性值 -->
<table id="demo"></table>
<br /><hr />
<!--
自动渲染：
1）带有class="layui-table"的<table>标签
2）对标签设置属性lay-data=""用于设置一些基础参数
3）在<th>标签中设置属性lay-data=""用于配置表头信息
-->
<table class="layui-table" lay-data="{url:'json/user.json',page: true}">
<<thead>
<tr>
<th lay-data="{field: 'id', width: 80, sort: true}">ID</th>
<th lay-data="{field: 'username', width: 120}">用户名</th>
<th lay-data="{field: 'email', minWidth: 150}">邮箱</th>
<th lay-data="{field: 'sign', minWidth: 160}">签名</th>
<th lay-data=" {field: 'sex', width: 80}">性别</th>
</tr>
</thead>
</table>
<br /><hr />
<div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
<button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
</div>
<!-- 转换静态表格 -->
<table lay-filter="parse-table-demo">
<thead>
<tr>
<th lay-data="{field:'username', width:200}">昵称</th>
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
<th lay-data="{field:'sign', minWidth: 180}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>2016-11-28</td>
<td>人生就像是一场修行 A</td>
</tr>
<tr>
<td>贤心2</td>
<td>2016-11-29</td>
<td>人生就像是一场修行 B</td>
</tr>
<tr>
<td>贤心3</td>
<td>2016-11-30</td>
<td>人生就像是一场修行 C</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//加载table模块
layui.use('table', function() {
var table = layui.table;
console.log("你好");
//加载table实例
// 方法渲染
table.render({//返回一个table对象
elem:"#demo",//elem属性用来绑定容器的id属性值
url:"json/user.json",//这里是一个数据接口
cols:[[//标题栏
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱', minWidth: 150},
{field: 'sign', title: '签名', minWidth: 160},
{field: 'sex', title: '性别', width: 80},
{field: 'city', title: '城市', width: 100},
{field: 'experience', title: '积分', width: 80, sort: true}
]],
//skin: 'line', //表格风格
even: true,
//height:315,//容器的高度
page: true, //是否显示分页
//limits: [5, 7, 10],可选分页的条数
//limit: 5 //每页默认显示的数量
});
var $ = layui.$, active = {
parseTable: function(){
table.init('parse-table-demo', { //转化静态表格的id
height: 'full-500',
});
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
})
</script>
</body>
</html>
数据表格头监听事件与行监听事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="demoTable layui-form">
<div class="layui-form-item">
<label class="layui-form-label">挑选日期：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input layui-input-inline" id="day" placeholder="yyyy-MM-dd">
</div>
<button class="layui-btn" data-type="reload" id="onclick_btn">搜索</button>
</div>
</div>
<table id="demo" lay-filter="demo"></table>
<script type="text/html" id="toolbarDemo">
<!--lay-event 给元素绑定事件-->
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
获取选中行数据
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
获取选中数目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
验证是否全选
</button>
</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>
<script type="text/javascript">
//加载table模块
layui.use(['table','laydate','jquery'], function() {
var table = layui.table;
var laydate=layui.laydate;
var $=layui.jquery;//获取jquery对象
//执行一个laydate实例
laydate.render({
elem: '#day' //指定元素
});
//加载table实例
// 方法渲染
table.render({//返回一个table对象
elem:"#demo",//elem属性用来绑定容器的id属性值
url:"json/user.json",//这里是一个数据接口
cols:[[//标题栏
//序列号
{field: 'aa', title: '序号', type:"numbers"},
//设置复选框
{field: 'aa', type:"checkbox"},
{field: 'id', title: 'ID', width: 80, sort: true,edit:'text'},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱', minWidth: 150},
{field: 'sign', title: '签名', minWidth: 160},
{field: 'sex', title: '性别', width: 80},
{field: 'city', title: '城市', width: 100,edit:'text'},
{field: 'experience', title: '积分', width: 80, sort: true},
{field:'操作',title: '操作',toolbar:"#barDemo"}
]],
//skin: 'line', //表格风格
//even: true,
//height:315,//容器的高度
page: true, //是否显示分页
// limits: [10, 30, 100],//可选分页的条数
// limit: 10, //每页默认显示的数量
//设置表格工具栏
toolbar:"#toolbarDemo"
});
/**
* 头监听事件
* 语法：
* table.on('toolbar(表格的lay-filter的属性值)',function(obj){
});
*/
table.on('toolbar(demo)',function(obj){
console.log(obj);
//obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是demo
//获取当前表格选中记录对象，返回数据
var checkbox=table.checkStatus(obj.config.id);
console.log(checkbox);
//获取事件名
var evenName=obj.event;
//判断事件名执行对应的函数
switch(evenName){
case "getCheckData":
//获取被选中的数组
var arr=checkbox.data;
//将数组解析成为字符串
layer.alert(JSON.stringify(arr));
break;
case "getCheckLength":
//获取被选中的数组
var arr=checkbox.data;
//将数组解析成为字符串
layer.msg("选中了"+arr.length+"条记录");
break;
case "isAll":
//通过isAll属性判断是否全选
var flag=checkbox.isAll;
var str=flag ? '全选':'未全选';
layer.msg(str);
default:
}
});
/*
监听行工具事件
table.on('tool(表格的lay-filter的属性值)',function(obj){
});
*/
table.on('tool(demo)',function(obj){
//得到当前操作的tr的相关事件
var tr=obj.data;
console.log(tr)
if(obj.event=='del'){
//确认框
layer.confirm('真的删除行吗？',function(index){
//删除指定的tr
obj.del();
//index当前弹出层的下标，通过下标关闭弹出层
layer.close(index);
});
}else if(obj.event=='edit'){
//输入框
layer.prompt({
//表单元素类型 0==文本框，1==密码框，2==文本域
formType:0,
title: '请输入值',
value:tr.username
},function(value,index){
//修改指定的单元格值
//value表示输入的值
obj.update({
username:value
});
//关闭弹出层
layer.close(index);
})
}
});
/*
监听单元格编辑事件
表头设置edit属性，单元格编辑类型(默认值不开启)目前只支持text（输入框）
*/
table.on('edit(demo)',function(obj){
console.log(obj);
//获取修改后的值
var value=obj.value;
//得到当前修改的对象
var data=obj.data;
//得到修改的字段
var field=obj.field;
layer.msg("[ID:"+data.id+"]的"+field+"的值修改为："+value);
});
/**
* 给指定元素绑定事件
*/
$(document).on('click','#onclick_btn',function(data){
console.log(data);
//获取搜索文本框对象
var click_data_text=$('#day');
//调用数据重载方法
table.reload('demo', {
where:{//设置需要传递的参数，可以随意传递
id:click_data_text.val(),
name:'张三'
},
page:{
//表示让条件查询，从第一页查询，如果未设置，则从当前页开始查询，此页前面的所有数据不纳入条件筛选
curr:1
}
})
});
})
</script>
</body>
</html>
