Preface

The forms, tables, and layer floating layers in the notes in this chapter are all key content

1. Content introduction

1. Form

In layui, layui not only provides a set of built-in styles for the form, but also provides a series of operation methods for the form.

1) Style

class="layui-form" indicates that the container uses the style of the form. This style is the basis of the specific style in the form.

class="layui-form-item": Indicates a specific item in the form
class="layui-form-label": Indicates the label in the form item, the text description
class="layui-input-block": Represents an input container, the block element occupies one line
class="layui-input-inline": Represents an input container, inline block. Do not occupy a line
class="layui-input": represents an input tag
class="layui-inline": means that it does not occupy a single line, generally used for multiple form elements in one item, use its package

2) Special style

In layui, special treatments are made for the checkbox, radio, and select styles in the form . Use javascript to render according to the attributes in the native input, and regenerate the DIV element with the response effect. And the generated DIV element is the same as the native The input tag has a binding relationship between attribute values.

Checkbox
single button:
Drop-down box:

3) form special attributes

Attribute name	Attribute value	Description
title	Any character	Set the element name, generally used for checkbox, radio box
lay-skin	switch (switch style) primary (original style)	Define the style of the element, currently only valid for the checkbox element, it can be changed to open
Off style
lay-ignore	Any character or no value	Whether to ignore element beautification treatment. After setting, the element will not be initialized rendering, that is, the system style will be retained
lay-filter	Any character	Event filters are mainly used for exact matching of events and are similar to selectors. In fact, it does not belong to the form module privately, it is applied to many event-based interfaces of layui.
lay-verify	required (required) phone (mobile phone number) email (mailbox) url (web address) number (number) date (date) identity (identity card)	Supports verification of multiple rules at the same time, format: lay-verify="verification A\|verification B"
lay-verType	tips (adsorption layer) alert (dialog box) msg (default)	Used to define the abnormal prompt layer mode
lay-reqText	Any character	Used to customize the prompt text of required items (ie the form with lay-verify="required") Note: This function is new in layui 2.5.0
lay-submit	No need to fill in the value	Bind the element that triggers the submission, such as button

4) Event

Insert picture description here

5) Method

Insert picture description here
6) Example

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

In layui, use class="layui-table" to indicate the style of the table. Tables are divided into static tables and dynamic tables. Static tables are static HTML tags with fixed data on the page. Dynamic tables are automatically rendered using Javascript Table of responses. Based on the data and specific attributes, the response table is rendered.

1) Basic parameters of the table:

Insert picture description here

2) Header parameters

Insert picture description here

3) Asynchronous data interface parameters

Insert picture description here

4) Method in table
Insert picture description here
5) Event monitoring

Insert picture description here
In the toolbar event, there are multiple buttons in the toolbar, that is, multiple events. In layui, use lay-event to distinguish

6) Example

<!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. Date and time -laydate

1) Use of laydate

Define a date and time container
Initialize the laydate component
Getting started example

<!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) Configuration parameters
Insert picture description here

3) Event

Insert picture description here
4) Example

<!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) Pop-up layer-layer

1) Use of layer

Initialize the layer object
Call method in layer
Getting started example:

<!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) Basic parameters
Insert picture description here

3) Method

Insert picture description here

4) Incident

Insert picture description here

5) Example

<!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) Picture/file upload-upload

In layui, upload the component: upload

1) Basic parameters

Insert picture description here

2) Example

<!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 (two) study notes

Preface

1. Content introduction

1. Form

2. table

3. Date and time -laydate

4) Pop-up layer-layer

5) Picture/file upload-upload

Guess you like