Layui 弹出层选择实现

Layui 弹出层选择实现实际Web项目中,下拉框仅能实现数据量少的场景,当我们添加一个商品时,我们总希望在添加选择前能看到产品的规格、图片、参数信息,那么用下拉框就显得力不从心了。本次需求如下:实现过程父层JS<script>layui.use([‘layedit’,’form’,’layer’,’upload’],function(){varform=layui.form,$=layui.jquery,la

大家好,又见面了,我是你们的朋友全栈君。

实际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>

效果
在这里插入图片描述
后记
当然不是说没有别的什么其它方案,比如利用全局变量来实现也不是不可以;另外可以通过多选框实现多选择功能。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142027.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 动漫补番_二次元入坑番

    动漫补番_二次元入坑番InfiniteStratos约会大作战零之使魔狗与剪刀的正确用法转载于:https://www.cnblogs.com/kexb/p/5968564.html

  • Java递归下降分析器_递归下降语法分析器[通俗易懂]

    Java递归下降分析器_递归下降语法分析器[通俗易懂]用java语言编写的递归下降语法分析器,是一种适合手写语法编译器的方法,且非常简单。递归下降法对语言所用的文法有一些限制,但递归下降是现阶段主流的语法分析方法,因为它可以由开发人员高度控制,在提供错误信息方面也很有优势。就连微软C#官方的编译器也是手写而成的递归下降语法分析器。使用递归下降法编写语法分析器无需任何类库,编写简单的分析器时甚至连前面学习的词法分析库都无需使用。我们来看一个例子:现在有…

  • 小白能读懂的 《手把手教你学DSP(TMS320X281X)》第六章 使用c语言操作dsp寄存器(以SCI为例进行说明))

    小白能读懂的 《手把手教你学DSP(TMS320X281X)》第六章 使用c语言操作dsp寄存器(以SCI为例进行说明))1c语言与汇编语言器一些对时间要求特别高的时候需要嵌入一些汇编语言,其他时候使用c语言通过位定义和寄存器结构体的方式来实现对dsp寄存器进行访问和控制。2配置SCI寄存器2.1了解SCI寄存器前面我们讲过2812有两个SCI寄存器(SCIA和SCIB),可以做成两个串口(2RS232/2RS484/RS232+RS485)首先我们查看寄存器的寄存器文件以SCIA为例,第一列表示他有13个寄存器可以操作,并且都以SCI开头进行命名;第二列表示地址,即该寄存器所在的位置;后面

  • SpEL表达式总结

    SpEL表达式总结前言SpEL(SpringExpressionLanguage),即Spring表达式语言,是比JSP的EL更强大的一种表达式语言。为什么要总结SpEL,因为它可以在运行时查询和操作数据,尤其是数组列表型数据,因此可以缩减代码量,优化代码结构。个人认为很有用。目录一.用法1.@Value2.配置3.Expression​​​​​​二.表达式语法1…

  • [2018年新版]以太坊ETH挖矿教程

    [2018年新版]以太坊ETH挖矿教程一.准备工作1.硬件准备ETH以太坊挖矿主要是使用高端3G显存以上显卡来挖矿,因此你需要一台拥有以下设备的电脑:显卡:6张rx470或gtx1060以上显卡,显存推荐4G以上主板:需要有6个以上pci-e插槽,目前市面上有主板直插和转接板2种。一般来说直插6卡或者8卡主板较为稳定。电源:电源功率视显卡数量,一般6卡需要850w以上其他配件:CPU、内存、硬盘(推荐60G以上SSD)、延长线…

  • Set、Map、List三种集合的差别

    Set、Map、List三种集合的差别1.集合类型主要有3种:set(集)、list(列表)和map(映射)。2.三者关系3.Setset接口时Collection接口的一个子接口,是无序的,set中不包含重复的元素,也就是说set中不存在两个这样的元素a1.equals(a2)结果为true。又因为Set接口提供的数据结构是数学意义上的集合概念的抽象,因此他支持对象的添加和删除。Set的接口继承Collectio…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号