前言

本章笔记中的表单,表格,layer浮层都为重点内容

一、内容介绍

1.表单form

在layui中,layui不仅仅为表单提供了一套内置的样式.也为表单提供了一系列的操作的方法.

1）样式

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元素,使用其包裹

2）特殊样式

扫描二维码关注公众号，回复： 12361857 查看本文章

在layui中,对form表单中checkbox,radio,select的样式,做了特殊处理.使用javascript,根据原生input中的属性,进行渲染,重新生成了响应效果的DIV元素.并且生成的DIV元素与原生input标签存在属性值的绑定关系.

复选框
单选按钮:
下拉框:

3）form表单特殊属性

属性名	属性值	说明
title	任意字符	设定元素名称，一般用于checkbox、radio框
lay-skin	switch（开关风格）primary（原始风格）	定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开
关样式
lay-ignore	任意字符或不设值	是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
lay-filter	任意字符	事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。
lay-verify	required（必填项）phone（手机号）email（邮箱） url（网址）number（数字） date（日期）identity（身份证）	同时支持多条规则的验证，格式：lay-verify=“验证A\|验证B”
lay-verType	tips（吸附层） alert（对话框）msg（默认）	用于定义异常提示层模式
lay-reqText	任意字符	用于自定义必填项（即设定了 lay-verify=“required” 的表单）的提示文本注意：该功能为 layui 2.5.0 新增
lay-submit	无需填写值	绑定触发提交的元素，如button

4）事件

在这里插入图片描述

5）方法

在这里插入图片描述
6）示例

<!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" layreqText="独占一行不能为空" />
</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 layfilter="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值):layfilter值是提交按钮上面
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>

2.表格table

在layui中,使用class=“layui-table” 表示表格的样式.表格分为静态表格和动态表格.静态表格是指页面固定数据写死的静态HTML标签.动态的表格是指使用Javascript自动渲染出来的表格.根据数据,以及特定属性渲染出响应的表格.

1）表格基础参数：

在这里插入图片描述

2）表头参数

在这里插入图片描述

3）异步数据接口参数

在这里插入图片描述

4）table中的方法
在这里插入图片描述
5）事件监听

在这里插入图片描述
在工具栏事件中,工具栏中存在多个按钮,即多种事件,在layui中,使用lay-event进行区分

6）示例

<!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" layevent='add'>
<i class="layui-icon">&#xe654;</i>
</button>
<button type="button" class="layui-btn layui-btn-sm" layevent='del'>
<i class="layui-icon">&#xe640;</i>
</button>
</div>
</script>
<script type="text/html" id="rowBtns">
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm" layevent='update'>
<i class="layui-icon">&#xe642;</i>
</button>
<button type="button" class="layui-btn layui-btn-sm" layevent='del'>
<i class="layui-icon">&#xe640;</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>

3.日期和时间-laydate

1）laydate使用

定义一个日期时间容器
初始化laydate组件
入门示例

<!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>

2）配置参数
在这里插入图片描述

3）事件

在这里插入图片描述
4）示例

<!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>

4）弹出层-layer

1）layer的使用

初始化layer对象
调用layer中方法
入门示例:

<!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>

2)基础参数
在这里插入图片描述

3)方法

在这里插入图片描述

4)事件

在这里插入图片描述

5)示例

<!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>

5）图片/文件上传 - upload

在layui中,上传组件:upload

1）基础参数

在这里插入图片描述

2）示例

<!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.创建文件上传的组件 -->
<button id="uploadBtn" class="layui-btn">上传文件</button>
<button id="uploadBtn2" class="layui-btn">提交文件上传</button>
<img alt="" src="" id="uploadImg">
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['layer','jquery','upload'], function() {
var layer = layui.layer;
var $ = layui.jquery;
var upload = layui.upload;
//2.初始化文件上传组件
upload.render({
elem:"#uploadBtn", //绑定上传组件容器
url:"upload.do",//文件上传的地址
data:{'sex':'男','age':'18'},//除文件数据意外的额外数据
accept:"file",// 允许上传的文件的类型 默认是图片
acceptMime:"image/*",//文件选择框时 文件格式
exts: 'jpg',// 设置选择的文件的后缀
auto:false,// 不自动提交
bindAction:"#uploadBtn2",//指定触发提交的按钮
field:"zhangsan",//文件上传中part的name值
//size:1,//文件上传的大小限制
choose:function(obj){
console.log("选择了文件");
console.log(obj);
//pushFile() : 将文件追加到文件队列 用于多文件上传
//preview(function(index, file, result){}) // index 文
件下标(注意多文件) file 对应文件对象 result文件base64编码
//obj.resetFile(index, file, '123.jpg')
//
obj.preview(function(index,file,result){
$("#uploadImg").attr("src",result);
});
},
before:function(){//在执行上传前调用
console.log("点击上传前执行");
layer.load();
},
done: function(res, index, upload){ //上传完成调用
layer.closeAll('loading'); //关闭loading
console.log("======done======");
console.log(res); // 返回的JSON数据
console.log(index);
console.log(upload);
},
error: function(index, upload){//上传失败
layer.closeAll('loading'); //关闭loading
console.log("======error======");
}
});
});
</script>
</body>
</html>

LayUI(二)学习笔记

前言

一、内容介绍

1.表单form

2.表格table

3.日期和时间-laydate

4）弹出层-layer

5）图片/文件上传 - upload

猜你喜欢