本文由雷哥整理，详细介绍了layui前端框架中表单元素的使用，包括监听事件、表单初始化和验证。重点讲解了弹出层的各类方法如layer.alert和layer.prompt，以及数据表格的属性、事件监听和方法，包括监听复选框、单元格编辑等。同时，提供了数据表格与弹出层结合的综合案例。
表单元素
输入框
密码框
下拉列表【重新渲染】
是加入layui-form 引入form模块
lay-search="" 是否支持下拉输入过滤
单选框【重新渲染】
是加入layui-form 引入form模块复选框【重新渲染】
是加入layui-form 引入form模块
lay-skin="primary" 使用原始的样式
开关【重新渲染】
是加入layui-form 引入form模块
使用checkbox实现
lay-skin="switch" 使用皮肤
文本域
富文本
表单对象form
监听提交事件
监听下拉框改变事件
监听复选框改变事件
监听开关改变事件
监听单选框选中事件
元素渲染
表单初始赋值
//初始化表单
$("#btn2").click(function(){
form.val("dataFrm",{
username:'张大明',
pwd:'123456',
phone:'13311112222',
email:'1231312@qq.com',
jiguan:'北京',
sex:'女',
//hobby:["写作","阅读","游戏"],
ishere:false
});
var hobby="写作,游戏";
var hobbys=hobby.split(",");
//得到hobbyElem
var hobbyElem=$("[name='hobby']");
$.each(hobbys,function(i,str){
alert(str);
$.each(hobbyElem,function(j,item){
var jdom=$(item);// 把dom--转jdom
if(jdom.val()==str){
//jdom.attr({"checked",true});
jdom.attr("checked","checked");
}
})
})
form.render();
});
表单验证
使用方法
lay-verify="required|phone"相关的值
required 非空验证
phone 手机号验证
number 数值验证
url 链接地址验证 http://www.baid.com
自定义验证
弹出层【重点】
layer.alert
layer.confirm
layer.prompt
layer.tab
layer.photos(options)
json要求
{
"title": "相册标题",
"id": 123,
"start": 0,
"data": [
{
"alt": "图片名1",
"pid": 5,
"src": "resources/images/img1.jpg",
"thumb": "resources/images/img1.jpg"
},
{
"alt": "图片名3",
"pid": 1,
"src": "resources/images/img3.jpg",
"thumb": "resources/images/img3.jpg"
},
{
"alt": "图片名4",
"pid": 2,
"src": "resources/images/img4.jpg",
"thumb": "resources/images/img4.jpg"
},
{
"alt": "图片名5",
"pid": 3,
"src": "resources/images/img5.jpg",
"thumb": "resources/images/img5.jpg"
},
{
"alt": "图片名6",
"pid": 4,
"src": "resources/images/img6.jpg",
"thumb": "resources/images/img6.jpg"
}
]
}
layer.msg
layer.tips
layer.type=0
//alert
$("#btn1").click(function() {
var x=layer.open({
type:0, //设置类型 默认为0 1 页面层 2ifream层
title:"提示", //标题
content:'你好吗?',//内容 type=0为内容
skin :'layui-layer-molv',//皮肤
/* area: '500px' */
area:['500px','300px'],//宽高
offset: 'auto', //offset默认情况下不用设置。但如果你不想垂直水平居中
icon:1 //只对type=0的效
, btn: ['按钮一', '按钮二', '按钮三']
,yes: function(index, layero){
//按钮【按钮一】的回调
alert("按钮一");
layer.close(index);
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
alert("按钮二")
//return false 开启该代码可禁止点击该按钮关闭
}
,btn3: function(index, layero){
//按钮【按钮三】的回调
alert("按钮三")
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
alert("cancel")
//return false 开启该代码可禁止点击该按钮关闭
}
,btnAlign :'c' //按钮的对齐方式
,closeBtn : 1 //设置关闭按钮的样式 1 默认
,shade: [0.8, '#FF0000']
,shadeClose:true //点击遮罩是否关闭弹层
,anim: 4 //设置动画
,maxmin :true //是否显示最大化和最小化的按钮 type=1 type=2有效
,success:function(layero, index){
alert(index+" "+x);
}
})
alert(x);
});
layer.type=1
页面层 把页面上的某一段HTML代码放到弹出层里面
此时的content属性可以使用html代码
也可以使用页面元素的选择器
layer.type=2
type=2时是一个ifream层
此时的content就是一个页面的url
数据表格【重点】
基本使用
准备json
{
"code": 0,
"msg": "",
"count": 101,
"data": [
{
"id": "10001",
"username": "杜甫",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。",
"experience": "116",
"ip": "192.168.0.8",
"logins": "108",
"joinTime": "2016-10-14"
},
{
"id": "10002",
"username": "李白",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。",
"experience": "12",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14",
"LAY_CHECKED": true
},
{
"id": "10003",
"username": "王勃",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "65",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10004",
"username": "李清照",
"email": "xianxin@layui.com",
"sex": "女",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "666",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10005",
"username": "冰心",
"email": "xianxin@layui.com",
"sex": "女",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "86",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10006",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10007",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "16",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10008",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "106",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
}
]
}
编写代码
可以使用html实现[了解]
可以使用js 实现[掌握]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数组表格</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<div style="display: none;" id="userToolBar">
<button type="button" class="layui-btn layui-btn-sm">增加</button>
<button type="button" class="layui-btn layui-btn-sm">编辑</button>
<button type="button" class="layui-btn layui-btn-sm">删除</button>
</div>
<div id="userBar" style="display: none;">
<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>
</div>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use([ 'jquery', 'layer', 'form', 'table' ], function() {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
//渲染数据表格
table.render({
elem: '#userTable' //渲染的目标对象
,url:'resources/json/users.json' //数据接口
,title: '用户数据表'//数据导出来的标题
/* ,toolbar:"<div>xxx</div>" */
,toolbar:"#userToolBar" //表格的工具条
,defaultToolbar:['filter','print']
/* ,height:300 */
,height:'full-200'
,cellMinWidth:100 //设置列的最小默认宽度
,done:function(res, curr, count){
/* alert(res);//后台url返回的json串
alert(curr);//当前页
alert(count);//数据总条数 */
}
,totalRow:true //开启合并行
,page: true //是否启用分页
/* ,limit:20 //设置每页显示条数 默认为10
,limits:[20,40,60,80] */
,text:{
none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
}
,cols: [[ //列表数据
{type: 'checkbox', fixed: 'left'}
,{type: 'numbers'}
,{field:'id', title:'ID', width:80,hide:true,sort:true}
,{field:'username', title:'用户名', width:120,sort:true,edit:true,align:'center'}
,{field:'email', title:'邮箱', width:150, templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, sort: true,align:'center',templet:function(d){
return d.sex=='男'?'汉子':'妹子';
}}
,{field:'city', title:'城市', width:100}
,{field:'sign', title:'签名',totalRowText:"合计"}
,{field:'experience', title:'积分', width:80,totalRow:true}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100,totalRow:true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#userBar', width:150,align:'center'}
]]
})
});
</script>
</body>
</html>
相关属性
表格属性
表头属性
field:和数据接口里面的data[{"id":1}]的key映射
title:表头的内容
width:宽度
hide:true 是否隐藏
sort:true 是否开启列排序
edit:true 是否支持编辑
align:'center' 内容对齐方式 left center right
templet:function(d){return d.sex=='男'?'汉子':'妹子';}}
totalRowText:"合计" 合计行的文本 前提是表格开启合并行
totalRow:true 是否合计前提是表格开启合并行
toolbar: '#userBar' 引入行的工具栏
相关事件监听
监听头部工具栏事件
监听复选框选择
监听单元格编辑
前提单元必须可以编辑
监听行单击事件
监听行双击事件
监听行工具事件
相关方法
获取选中行
表格重载
数据表格+弹出层的综合案例【重点】
json准备
{
"code": 0,
"msg": "",
"count": 101,
"data": [
{
"id": "10001",
"username": "杜甫",
"email": "xianxin@layui.com",
"sex": "1",
"city": "浙江杭州",
"LAY_CHECKED":true
},
{
"id": "10002",
"username": "李白",
"email": "xianxin@layui.com",
"sex": "1",
"city": "浙江杭州",
"LAY_CHECKED": true
},
{
"id": "10003",
"username": "王勃",
"email": "xianxin@layui.com",
"sex": "1",
"city": "浙江杭州"
},
{
"id": "10004",
"username": "李清照",
"email": "xianxin@layui.com",
"sex": "0",
"city": "浙江杭州"
},
{
"id": "10005",
"username": "冰心",
"email": "xianxin@layui.com",
"sex": "0",
"city": "浙江杭州"
},
{
"id": "10006",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "1",
"city": "浙江杭州"
},
{
"id": "10007",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "1",
"city": "浙江杭州"
},
{
"id": "10008",
"username": "贤心",
"email": "xianxin@layui.com",
"sex": "1",
"city": "浙江杭州"
}
]
}
创建页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数组表格</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>查询条件</legend>
</fieldset>
<form action="" class="layui-form" method="post">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">编号:</label>
<div class="layui-input-inline">
<input type="text" name="id" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户名:</label>
<div class="layui-input-inline">
<input type="text" name="username" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">邮箱:</label>
<div class="layui-input-inline">
<input type="text" name="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始时间:</label>
<div class="layui-input-inline">
<input type="text" name="startTime" id="startTime" readonly="readonly" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间:</label>
<div class="layui-input-inline">
<input type="text" name="endTime" id="endTime" readonly="readonly" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性别:</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="1" title="男">
<input type="radio" name="sex" value="0" title="女">
</div>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSearch">查询</button>
<button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button>
</div>
</div>
</form>
<!-- 搜索条件结束 -->
<!-- 数据表格开始 -->
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<div style="display: none;" id="userToolBar">
<button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
<button type="button" class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>
</div>
<div id="userBar" style="display: none;">
<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>
</div>
<!-- 数据表格结束 -->
<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
<form class="layui-form " action="" lay-filter="dataFrm" id="dataFrm">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">编号:</label>
<div class="layui-input-inline">
<input type="text" name="id" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户名:</label>
<div class="layui-input-inline">
<input type="text" name="username" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">邮箱:</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="required|email" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">城市:</label>
<div class="layui-input-inline">
<input type="text" name="city" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">性别:</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="1" checked="checked" title="男">
<input type="radio" name="sex" value="0" title="女">
</div>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
<button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
</div>
</div>
</form>
</div>
<!-- 添加和修改的弹出层结束 -->
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use([ 'jquery', 'layer', 'form', 'table','laydate' ], function() {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var laydate=layui.laydate;
//绑定时间选择器
laydate.render({
elem:'#startTime'
});
laydate.render({
elem:'#endTime'
})
//渲染数据表格
var tableIns=table.render({
elem: '#userTable' //渲染的目标对象
,url:'resources/json/users.json' //数据接口
,title: '用户数据表'//数据导出来的标题
,toolbar:"#userToolBar" //表格的工具条
,height:'full-300'
,cellMinWidth:100 //设置列的最小默认宽度
,done:function(res, curr, count){
}
,page: true //是否启用分页
,cols: [[ //列表数据
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', sort:true}
,{field:'username', title:'用户名', sort:true,align:'center'}
,{field:'email', title:'邮箱', align:'center', templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'sex', title:'性别',align:'center',templet:function(d){
return d.sex=='1'?'男':'女';
}}
,{field:'city', title:'城市',align:'center'}
,{fixed: 'right', title:'操作', toolbar: '#userBar', width:220,align:'center'}
]]
})
//监听头部工具栏事件
table.on("toolbar(userTable)",function(obj){
switch(obj.event){
case 'add':
openAddUser();
break;
case 'batchDelete':
layer.msg('批量删除');
break;
};
})
//监听行工具事件
table.on('tool(userTable)', function(obj){
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if(layEvent === 'del'){ //删除
layer.msg("删除");
layer.confirm('真的删除行么', function(index){
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
openUpdateUser(data);
}
});
var url;
var mainIndex;
//打开添加页面
function openAddUser(){
mainIndex=layer.open({
type:1,
title:'添加用户',
content:$("#saveOrUpdateDiv"),
area:['800px','400px'],
success:function(index){
//清空表单数据
$("#dataFrm")[0].reset();
url="user/addUser.action";
}
});
}
//打开修改页面
function openUpdateUser(data){
mainIndex=layer.open({
type:1,
title:'修改用户',
content:$("#saveOrUpdateDiv"),
area:['800px','400px'],
success:function(index){
form.val("dataFrm",data);
url="user/updateUser.action";
}
});
}
//保存
form.on("submit(doSubmit)",function(obj){
//序列化表单数据
var params=$("#dataFrm").serialize();
$.post("index.jsp",params,function(obj){
layer.msg(obj);
//关闭弹出层
layer.close(mainIndex)
//刷新数据 表格
tableIns.reload();
})
});
});
</script>
</body>
</html>
文件上传
选择文件之后自动上传
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: 'file/upload.action'
,accept:'images'
,acceptMime:'image/*'
,auto:true//是否选择文件之后自动上传
,field:'mf' //表单的name值
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
}
,done: function(res){
alert(res);
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
layer.msg("上传成功");
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
非自动上传
2119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
