原生JS+layui项目笔记（一）【layer弹出框与form、table】
一、准备文件
1. html文件引入
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript" src="./xxx/xxxx.js"></script>2.js文件引入layui的各种组件
layui.use(['jquery',layer','table','form','laytpl','laydate'],function(){
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
var upload = layui.upload;
})二、layer弹出框
1.1 单一弹出框
layer.confirm('确定删除吗？',{
skin:'m-pop-window',
btnAlign:'c',
shade:[0, 'transparent'],
btn:['确定','删除'],
btn1:function(index, layero){
$.post('deleteUrl',{data:data},function(res){
if(res.code == '0'){
layer.msg('删除成功');
layer.close(index);
table.reload('table的id',{url:'',where:{}}) // 刷新表格
}
})
}
}
},layer.msg('请输入名称后检索！');1.2 layer内嵌表单（form+laydate+upload）
1.2.1 html中的form模板
写在htmlbody之外，写在script中，否则出现按钮失效。
<body>
<button type="button" id="openLayer" class="layui-btn">开启弹窗</button>
</body>
<script id="addMappingBox">
<div class="layui-form" layfilter="add_mining" id="add_mining">
<div class="layui-form-item">
<lable>名称1</lable>
<!-- 一般输入框 -->
<div class="layui-input-block">
<input type="text" name="title" id="title1" class="layui-input" value={{d.title1}}/>
</div>
</div>
<div class="layui-form-item">
<lable>输入文本框</lable>
<!-- 文本框 文本框插入值不能写在value中-->
<div class="layui-input-block">
<textarea type="text" name="title2" id="title2" class="layui-input">{{d.title2}}</textarea>
</div>
</div>
<div class="layui-form-item">
<lable>选择日期</lable>
<!-- 日期-->
<div class="layui-input-block">
<input type="text" name="mapDate" id="mapDate" class="layui-input" value={{d.title3}}/>
</div>
</div>
<div class="layui-form-item">
<lable>上传文件</lable>
<!-- 上传文件-->
<div class="layui-input-block">
<button type="button" id="uploadMindMapping" class="layui-btn">点击上传</button>
<!-- 上传文件后回显文件名称-->
<span id="uploadFileName"></span>
</div>
</div>
</div>
</script>1.2.2 js语法
触发弹窗：
//点击事件触发弹窗
$("#openLayer").click(function(){
var addMappingWindow = laytpl(addMappingBox.innerHTML).render({
<--!此处可利用name绑定value -->
'title' : $("#xxx").html();
'title2' : $("#xxx").val();
});
layer.open({
type:1,
content:addMappingWindow,
title:'弹窗的标题',
skin:'m-pop-window',
area:['700px','600px'],
offset:'auto',
btn:['确定','取消'],
btnAlign:'c',
resize:false,
success: function(layero,index){
form.render(); // 表单渲染
initUploadMindMapping(); // 上传控件渲染
},
yes: function(layero, index){
layer.close(index);
return false; // 禁止layer自动刷新页面
}
})
});
// 时间控件
laydate.render({
elem:'#mapDate',
type:'datetime',
format:'yyyy-MM-dd HH:mm:ss',
change:function(value, date, endDate){
}
});
// 上传控件
function initUploadMindMapping(){
upload.render({
elem:'#uploadMindMapping',
bindAction:'.layui-layer-btn0',
auto:false,
url:'/uploadUrl',
type:'post',
accept:'file',
exts:'xls|xlsx', // 有时候限定‘file’后不限定明确类型会报'类型有问题'的错
choose:function(obj){
obj.preview(function(index, file, result){
// 反显文件名
$('#uploadFileName').html(file.name)
})
},
done:function(res){
}
})
};1.3 layer内嵌表格（form+table）
1.3.1 html模板（动态table）
<script id="organization_set" type="text/html">
<div class="layui-form" lay-filter="">
<div class="layui-form-item">
<lable >复选框<lable>
<div class="layui-input-block">
<input type="checkbox" name="chooseIndex1" lay-filter="chooseIndex1" class="layui-input" title="按名称选" value="1" lay-skin="primary checked"/>
<input type="checkbox" name="chooseIndex1" lay-filter="chooseIndex1" class="layui-input" title="按描述选" value="2" lay-skin="primary checked"/>
</div>
</div>
<div class="layui-form-item">
<lable >单选框<lable>
<div class="layui-input-block">
<input type="radio" name="chooseIndex2" lay-filter="chooseIndex2" class="layui-input" title="按名称选" value="0" lay-skin="primary checked"/>
<input type="radio" name="chooseIndex2" lay-filter="chooseIndex2" class="layui-input" title="按描述选" value="1" lay-skin="primary checked"/>
</div>
</div>
<div class="layui-form-item">
<lable>筛选结果<lable>
<div class="layui-input-block">
<table id="resultTable" lay-filter="resultTable"></table>
</div>
</div>
</div>
</script>1.3.2 js语法(根据单选框、复选框内容刷新表格显示搜索结果)
var organizationChooseWindow = laytpl(organization_set.innerHTML).render({
});
layer.open({
type:1,
content:addMappingWindow,
title:'弹窗的标题',
skin:'m-pop-window',
area:['700px','600px'],
offset:'auto',
btn:['确定','取消'],
btnAlign:'c',
resize:false,
success: function(layero,index){
form.render(); // 表单渲染
// 未选择的时候 搜索结果显示（表格渲染）
initSearchOrganizationTable();
// 复选框内容监听
form.on('checkbox(chooseIndex1)'),function(data){
form.render('checkbox')
// 全选
if($('#organization_set_form input[type=checkbox]:checked').length == 2){
table.reload('organizationSearchResult',{
where : {
organizationName:xxx,
describe:xxx
}
})
}else if($('#organization_set_form input[type=checkbox]:checked').val() == '1'){
table.reload('organizationSearchResult',{
where : {
organizationName:xxx
}
})
}else if($('#organization_set_form input[type=checkbox]:checked').val() == '2'){
table.reload('organizationSearchResult',{
where : {
describe:xxx
}
})
}
};
// 单选框内容监听
form.on('radio(chooseIndex2)'),function(data){
form.render('radio')
if($('#organization_set_form input[type=radio]:checked').val() == '0'){
table.reload('organizationSearchResult',{
where : {
organizationName:xxx
}
})
}else if($('#organization_set_form input[type=radio]:checked').val() == '1'){
table.reload('organizationSearchResult',{
where : {
describe:xxx
}
})
}
}
},
yes: function(layero, index){
layer.close(index);
return false; // 禁止layer自动刷新页面
}
});
function initSearchOrganizationTable(){
// 带分页的table
table.render({
elem:'#organizationSearchResult',
id:'organizationSearchResult',
width: 470,
height: 300,
page:true,
limit:50,
method:'get',
url:'linkUrl',
where:{
'taskId':xxx,
'organization': xxx,
'describe':xxxx
},
// 规范返回数据格式，格式不同渲染不出来
parseData:function(res){
return {
'code':res.code,
'msg':res.message,
'data':res.data
}
},
cols:[[
{
type:'checkbox',
title:'',
algin:'center'
},
{
type:'radio',
title:'',
algin:'center'
},
{
field:'organizationName',
title:'名称',
algin:'center',
width: 80,
},
{
field:'describe',
title:'描述',
algin:'center'
}
]],
// 渲染成功后的回调，可以修改table样式
done:function(res){
// 修改单元格padding，展示更多的内容
$('.layui-table-cell').css('padding','0 2px')
}
})
};
// 获取复选框内容
var data_table = table.checkStatus('organizationSearchResult').data;1.4 表格事件内嵌弹出框（table+layer+form 【单选框回显】）
1.4.1 html模板（动态table）
类似1.3.1插入一个table的容器
<body>
<table id="WDmsgTable" lay-filter="WDmsgTable"></table>
</body>
<script id="consistency_set" type="text/html">
<div class="layui-form" lay-filter="consistency_set_form" id="consistency_set_form">
<div class="layui-form-item">
<lable>机构名称</lable>
<div class="layui-input-block">
<input class="layui-input" name="organizationName" readonly value="{{d.organizationName}}"/>
</div>
</div>
<div class="layui-form-item">
<lable>时间</lable>
<div class="layui-input-block">
<input class="layui-input" name="consistencyTime" readonly value="{{d.consistencyTime}}"/>
</div>
</div>
<div class="layui-form-item">
<lable>正文</lable>
<div class="layui-input-block">
<textarea class="layui-input" name="consistencyContent" readonly value="">{{d.consistencyContent}}</textarea>
</div>
</div>
<div class="layui-form-item">
<lable>是否合规</lable>
<div class="layui-input-block">
<input type="radio" lay-filter="consistencyRadio" name="consistencyRadio" value="1" title="是" checked/>
<input type="radio" lay-filter="consistencyRadio" name="consistencyRadio" value="0" title="否"/>
</div>
</div>
</div>
</script>1.4.2 js语法
//表格事件触发弹窗
table.render({
elem:'#organizationSearchResult',
id:'organizationSearchResult',
width: 470,
height: 300,
page:true,
limit:50,
method:'get',
url:'linkUrl',
where:{
'taskId':xxx,
'organization': xxx,
'describe':xxxx
},
// 规范返回数据格式，格式不同渲染不出来
parseData:function(res){
return {
'code':res.code,
'msg':res.message,
'data':res.data
}
},
cols:[[
{
type:'radio',
title:'',
algin:'center'
},
{
field:'organizationName',
title:'名称',
algin:'center',
width: 80,
},
{
field:'describe',
title:'描述',
algin:'center'
},
{
title:'操作',
algin:'center',
templet:function(d){
if(d.isComliance){
return '<a lay-event="check">是</a>'
}else{
return '<a lay-event="check">否</a>'
}
}
}
]],
});
table.on('tool(organizationSearchResult)',function(obj){
var table_data = obj.data;
var event = obj.event;
var consistency_set_window = laytpl(consistency_set.innerHTML).render({
<--!此处可利用name绑定value -->
'organizationName' : $('#searchOrganization').val()?'三元':'';
'consistencyContent' : table_data.zj;
'consistencyTime': table_data.sj;
});
if(event == 'check'){
layer.open({
type:1,
content:consistency_set_window ,
title:'弹窗的标题',
skin:'m-pop-window',
area:['700px','600px'],
offset:'auto',
btn:['确定','取消'],
btnAlign:'c',
resize:false,
success: function(layero,index){
form.render(); // 表单渲染
//单选框回显
$("input[name=consistencyName][value='1']").attr("checked",table_data.isComliance == '1'?true:'false);
$("input[name=consistencyName][value='0']").attr("checked",table_data.isComliance == '0'?true:'false);
//监听单选框变化，刷新单选框
form.on('radio(consistencyRadio)',function(){
form.render('radio')
});
},
yes:function(index, layero){
//上传数据，刷新表格
$.get('url',{isComliance : $("input[name=consistencyName]:checked").val()},function(res){
if(res.code == '0'){
table.reload('WDmsgTable',true)
}
})
layer.close(index);
return false;
},
})
}
})