Layui 弹出层选择实现
程序员文章站
2022-05-06 09:33:44
...
实际Web项目中，下拉框仅能实现数据量少的场景，当我们添加一个商品时，我们总希望在添加选择前能看到产品的规格、图片、参数信息，那么用下拉框就显得力不从心了。
本次需求如下：
实现过程
父层JS
<script>
layui.use(['layedit', 'form', 'layer', 'upload'], function () {
var form = layui.form,
$ = layui.jquery,
layer = layui.layer;
//监听提交
form.on('submit(saveBtn)', function (data) {
var index = layer.open({
title: '选择产品',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['70%', '60%'],
content: '/selectProduct'
});
$(window).on("resize", function () {
layer.full(index);
});
});
});
//注意重点是这里 将来这里是要被子层调用的
function ChooseValues(v) {
var $ = layui.jquery;
//监听提交
if (v != "") {
$("#pname").val(v.productName); //这里是向一个ID里赋值
return v.productName;
}
}
</script>
弹出层（子层）JS
<script>
layui.use(['form', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
table.render({
cellHeight: 300,
elem: '#currentTableId',
url: 'Product/ProductAll',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [
[
{type: "checkbox", width: 50},
{field: 'id', width: 20, title: 'ID', sort: true},
{field: 'productName', width: 150, title: '产品名称'},
{field: 'productImage', width:100, title: '图片', minWidth: 50,
templet:function(res){
return '<img src="'+res.productImage+'"> </img>'
}
},
{field: 'spc', width: 150, title: '规格'},
{field: 'productUnit', width: 80, title: '单位'},
{field: 'parameters', width: 100, title: '技术参数'},
{title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}
]
],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'line',
id:'testReload'
});
var $ = layui.$, active = {
reload: function(){
//用户名
var usernameId=$('#username');
var telId=$('#tel');//电话
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
username:usernameId.val().trim(),
tel:telId.val().trimEnd()
}
}, 'data');
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
/**
* 获取选中id的集合
*/
function getCheckId(data){
var arr=new Array();
for(var i=0;i<data.length;i++){
arr.push(data[i].id);
}
//拼接id记录
return arr.join(",");
}
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'chose') {
let a=parent.ChooseValues(data);//注意这里调用父层的JS 实现传值
var index= parent.layer.getFrameIndex(window.name);//获取当前层
parent.layer.close(index);//关闭当前层
return false;
};
})
})
</script>
完整代码
父层
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{lib/layui-v2.5.5/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{css/public.css}" media="all">
</head>
<body>
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label">产品选择</label>
<div class="layui-input-inline">
<input type="text" id="pname" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">选择</button>
</div>
</div>
<div class="layui-form-item">
</div>
</div>
</body>
<script th:src="@{lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script th:src="@{lib/layui-v2.5.5/ace/ace.js}" charset="utf-8"></script>
<script>
layui.use(['layedit', 'form', 'layer', 'upload'], function () {
var form = layui.form,
$ = layui.jquery,
layer = layui.layer;
//监听提交
form.on('submit(saveBtn)', function (data) {
var index = layer.open({
title: '选择产品',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['70%', '60%'],
content: '/selectProduct'
});
$(window).on("resize", function () {
layer.full(index);
});
});
});
function ChooseValues(v) {
var $ = layui.jquery;
//监听提交
if (v != "") {
$("#pname").val(v.productName);
return v.productName;
}
}
</script>
</html>
子层
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{lib/layui-v2.5.5/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{css/public.css}" media="all">
<script th:src="@{lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter">
<!-- 数据渲染区 -->
</table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="chose">选择</a>
</script>
</div>
</div>
<script th:src="@{lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script>
layui.use(['form', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
table.render({
cellHeight: 300,
elem: '#currentTableId',
url: 'Product/ProductAll',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [
[
{type: "checkbox", width: 50},
{field: 'id', width: 20, title: 'ID', sort: true},
{field: 'productName', width: 150, title: '产品名称'},
{field: 'productImage', width:100, title: '图片', minWidth: 50,
templet:function(res){
return '<img src="'+res.productImage+'"> </img>'
}
},
{field: 'spc', width: 150, title: '规格'},
{field: 'productUnit', width: 80, title: '单位'},
{field: 'parameters', width: 100, title: '技术参数'},
{title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}
]
],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'line',
id:'testReload'
});
var $ = layui.$, active = {
reload: function(){
//用户名
var usernameId=$('#username');
var telId=$('#tel');//电话
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
username:usernameId.val().trim(),
tel:telId.val().trimEnd()
}
}, 'data');
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
/**
* 获取选中id的集合
*/
function getCheckId(data){
var arr=new Array();
for(var i=0;i<data.length;i++){
arr.push(data[i].id);
}
//拼接id记录
return arr.join(",");
}
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'chose') {
let a=parent.ChooseValues(data);
console.log(JSON.stringify(a));
var index= parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
return false;
};
})
})
</script>
</body>
<style>
.layui-table-cell{
height:auto;
line-height: 30px;
}
</style>
</html>
效果
后记
当然不是说没有别的什么其它方案，比如利用全局变量来实现也不是不可以；另外可以通过多选框实现多选择功能。