Layui 弹出层选择数据实现
2024-06-01 07:34:29
实际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>
Layui 弹出层选择数据实现相关推荐
- Layui 弹出层选择实现
实际Web项目中,下拉框仅能实现数据量少的场景,当我们添加一个商品时,我们总希望在添加选择前能看到产品的规格.图片.参数信息,那么用下拉框就显得力不从心了. 本次需求如下: 实现过程 父层JS < ...
- 前端框架Layui学习五：弹出层和数据表格
Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,拿来即用. 一.弹出层 在 layui 中使用 layer l ...
- html弹出层获取填充数据,layui 弹出层回调获取弹出层数据的例子
如下所示: // 弹出楼栋负责人信息页面 layer.open({ type: 2, title:'请选择楼栋负责人', maxmin: false, area: ['60%', '80%'], of ...
- layui怎样将响应数据展示在页面_layui怎么对弹出层显示数据
layui怎么对弹出层显示数据?下面给大家举个例子:点击查看 function func11() { console.log($.cookie("id")); //iframe窗 ...
- layui 弹出层回调获取弹出层数据
// 弹出楼栋负责人信息页面 layer.open({ type: 2, ...
- Layui弹出层的三项选择
以Layu.msg()为例. layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', {time: 20000, //20s后自动关闭btn: ['明白了', ...
- layui弹出层之layer.open弹出iframe窗口·
layui弹出层之layer.open弹出iframe窗口· layer.open弹出iframe窗口 [1]该功能为案例,弹出iframe窗口显示上传数据 由于layui的弹出层每次执行layer. ...
- layui弹出层使用方法总结
layui的模态窗口很强大,但是使用的时候要声明很多东西,并且对于窗口之间的参数传递也没有做具体的说明,所以基于layui弹出层的api进行了一些简单的封装,使用起来更加顺手,先上代码 functio ...
- layui弹出层：皮肤扩展（文档解读）
layui弹出层:皮肤扩展(文档解读) layui弹出层:样式自定义 官方文档:https://layer.layui.com/ 皮肤扩展 · 官方教程: 官方文档:https://layer.lay ...
最新文章
- 【数字信号处理】离散时间系统因果性 ( 因果性概念 | 充要条件及证明 )
- LESSON 3 线性回归的手动实现
- 在微信小程序上,帮助中心界面实现类似手风琴案例
- 使用tf.keras搭建mnist手写数字识别网络
- 网站搭建从零开始（二）服务器空间
- P5024 保卫王国
- python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
- Cloud一分钟 | 一脚踏入云计算2.0时代，京东云这回拼的是“朋友 圈”；8400万元私有云招标...
- Ubuntu解决sudo source command not found错误
- 2020年不能启动win7_包装车间2020年大修正式启动
- qq for android 1.0,QQ for Pad 1.0正式发布 Android专版
- imagenet数据集类别标签和对应的英文中文对照表
- 2019.11.4 英语学习
- 各软件版本、仓库、官网地址
- 软件测试面试题之非技术面试(GZH:软件测试大本营)
- matlab三维螺旋,如何在MATLAB或Python中生成三维螺旋线？
- ubuntu更新源及添加方法
- solaris 的ZFS操作
- php excel 导出 插件,php不使用插件导出excel
- World Streamer学习2