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)


相关推荐

  • idea激活码2022-激活码分享2022.02.14

    (idea激活码2022)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • 自己写一个jqery的拖拽插件

    自己写一个jqery的拖拽插件

  • python进制转换函数

    python进制转换函数一:二,八,十六进制转十进制注意2进制对应的数值范围只能是0和1,超过范围会报错,8进制和16进制同理。print(int(‘100′,2))#二进制转十进制,int(’20’,2)会报错print(int(’30’,8))#八进制转十进制,int(’80’,8)会报错print(int(‘f0’,16))#十六进制转十进制,int(‘g0’,16)会报错二:十进制转二进制、八进制、十六进制。内置函数bin、oct、hex得到的进制前面会分别带有’0b’,‘0o’,’0x’字符。

  • 学习大数据需要什么基础?大数据要学哪些内容?

    学习大数据需要什么基础?大数据要学哪些内容?大数据只需要学习Java的标准版JavaSE就可以了,像Servlet、JSP、Tomcat、Struct、Spring、Hibernate,Mybaits都是JavaEE方向的技术在大数据技术里用到的并不多,只需要了解就可以了,当然Java怎么连接数据库还是要知道的,像JDBC一定要掌握一下,有同学说Hibernate或Mybaits也能连接数据库啊,为什么不学习一下,我这里不是…

  • UE4地编基础-材质蓝图篇[通俗易懂]

    UE4地编基础-材质蓝图篇[通俗易懂]一、贴图规格颜色贴图:颜色贴图必须是8位数RGB颜色。如果在UE4里,发现颜色贴图泛白,那么明颜色贴图是16位数的。改成8位数就正常了。灰度贴图:包括AO、Metallic(金属度)、Roughness(粗糙度)贴图。法线贴图:UE4支持Directx的法线贴图。二、贴图效果调节(蓝图)法线贴图强度调节:AO贴图强度调节:三、各种材质制作1、玻璃材质2、自发光材质……

  • 高级面试题–SpringBoot启动流程解析「建议收藏」

    高级面试题–SpringBoot启动流程解析「建议收藏」写在前面:由于该系统是底层系统,以微服务形式对外暴露dubbo服务,所以本流程中SpringBoot不基于jetty或者tomcat等容器启动方式发布服务,而是以执行程序方式启动来发布(参考下图keepRunning方法)。本文以调试一个实际的SpringBoot启动程序为例,参考流程中主要类类图,来分析其启动逻辑和自动化配置原理。总览:上图为SpringBoot启动结构图,我们发现启动流程…

发表回复

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

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