layui 省市区 三联下拉框插件 父子页面传值问题

最新推荐文章于 2024-05-24 18:20:04 发布
最新推荐文章于 2024-05-24 18:20:04 发布
阅读量863 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangdingguo/article/details/104108339
版权

1 问题 table列表的省市区的值怎么传到弹出层的下面向这样

插件地址 https://fly.layui.com/extend/layarea/

父源码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <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" href="../layui-v2.5.5/css/layui.css">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">门店编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="storeId" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">门店名字</label>
                            <div class="layui-input-inline">
                                <input type="text" name="storeName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                           <!-- <button data-type="reload" class="layui-btn layui-btn-primary" lay-filter="data-search-btn">
                                <i class="layui-icon"></i> 搜 索
                            </button>-->
                            <button class="layui-btn layuiadmin-btn-replys" data-type="reload" lay-submit lay-filter="data-search-btn">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button type="button" class="layui-btn layui-btn-sm data-add-btn"> 添加门店</button>
                <button type="button" class="layui-btn layui-btn-sm data-import-btn"> 导入</button>
                <button type="button" class="layui-btn layui-btn-sm data-export-btn"> 导出</button>
            </div>
        </script>

        <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="detail">添加房间类型</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

        </script>

    </div>
</div>
<input type="hidden"  autocomplete="off"  class="proviceName layui-input">
<input type="hidden"  autocomplete="off" class="cityName layui-input">
<input type="hidden"  autocomplete="off" class="countyName layui-input">

<script type="text/javascript" src="../js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    var tableRender='';
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tableSearch=layui.table;
            layuimini = layui.layuimini;

        table.render({
            elem: '#currentTableId',
            url: '/getStoreMessage',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {type: "checkbox", width: 50, fixed: "left"},
                    {field: 'id', width: 80, title: '门店编码', sort: true},
                    {field: 'hotelName', width: 120, title: '门店名'},
                    {field: 'province', width: 120, title: '所在省'},
                    {field: 'city', width: 120, title: '所在市'},
                    {field: 'detailAddress', width: 150, title: '详细地址'},
                    {field: 'createTime', width: 180, title: '创建时间', sort: true},
                    {field: 'flag', width: 80, title: '标志', sort: true},
                    {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
                ]
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true
        });


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            /*var result = JSON.stringify(data.field.storeId);*/
            var result = JSON.stringify(data.field);
            console.log(result);
           var search=tableSearch.render({
                elem: '#currentTableId',
                url: '/getSearchStoreMessage',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [
                    [
                        {type: "checkbox", width: 50, fixed: "left"},
                        {field: 'id', width: 80, title: '门店编码', sort: true},
                        {field: 'hotelName', width: 120, title: '门店名'},
                        {field: 'province', width: 120, title: '所在省',edit:'option '},
                        {field: 'city', width: 120, title: '所在市'},
                        {field: 'detailAddress', width: 150, title: '详细地址'},
                        {field: 'createTime', width: 180, title: '创建时间', sort: true},
                        {field: 'flag', width: 80, title: '标志', sort: true},
                        {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
                    ]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true
            });
            search.reload({
                page: {
                    curr: 1
                },
                method:'post',
                where: {
                  /*  searchParams: result*/
                    storeId:data.field.storeId,
                    storeName:data.field.storeName

                }
            });

            return false;
        });

        // 监听添加操作原型
        /*$(".data-add-btn").on("click", function () {*/
        //委托body做点击事件
        $('body').on("click",'.data-add-btn',function () {
            console.log("ok");
    /*       layer.open({
                type:1,
                title:'添加门店',
                area:['500px', '260px'],
                content: '/tables',
                maxmin: true,
                btn: ['保存', '退出']
            })*/

           var index = layer.open({
                title: '客房管理-->添加门店',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['80%', '80%'],
                content: '/addStore',
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
            return false;
        });

        // 监听删除操作
        $(".data-delete-btn").on("click", function () {
            var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
            layer.alert(JSON.stringify(data));
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {

            //获取当前行的数据
            var data = obj.data;
            window.proviceName=data.province;
            window.cityName=data.city;
            window.countyName=data.county;
            console.log( $('.proviceName').val());
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['80%', '80%'],
                    content: '/modifyStore',
                    success:function (layero,index) {
                        var body = layer.getChildFrame('body', index);
                        //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
                        body.find(".id").val(data.id);
                        body.find(".hotelName").val(data.hotelName);
                        body.find(".layui-textarea").val(data.detailAddress);

                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

    });
</script>
<script>

</script>

</body>
</html>

弹出层源码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <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" href="../layui-v2.5.5/css/layui.css">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>门店具体信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form" action="">
                      <input type="text" name="id" hidden="false" class="id" placeholder="iddf">
                    <div class="layui-form-item">
                        <label class="layui-form-label">门店名字</label>
                        <div class="layui-input-block">
                            <input type="text" name="hotelName" required  lay-verify="required" placeholder="请输入门店名字" autocomplete="off" class="hotelName layui-input">
                        </div>
                    </div>

                    <div class="layui-form">
                        <div class="layui-form-item" id="area-picker">
                            <label class="layui-form-label">门店地区</label>
                            <div class="layui-input-inline" style="width: 200px; margin-top: 30px;">
                                <select name="province" class="province-selector" data-value="湖南省"   lay-filter="province-1">
                                    <option class="select_provice" value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px; margin-top: 30px;">
                                <select name="city" class="city-selector" data-value="张家界市"  lay-filter="city-1">
                                    <option id="select_city" value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px; margin-top: 30px;">
                                <select name="county" class="county-selector" data-value="永定区"  lay-filter="county-1">
                                    <option id="select_county" value="">请选择区</option>
                                </select>
                            </div>

                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">详细地址</label>
                        <div class="layui-input-block">
                            <textarea   name="detailAddress"  required  lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>


            </div>
        </fieldset>
    </div>
</div>

<script type="text/javascript" src="../js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../layui-v2.5.5/layui.js" charset="utf-8"></script>
<   <script>
    //省市区三联配置插件目录
    console.log(parent.parentId+"---parent---");
   console.log("111");
    $(function () {
        $('.province-selector').attr('data-value',parent.proviceName);
        $('.city-selector').attr('data-value',parent.cityName);
        $('.county-selector').attr('data-value',parent.countyName);
    })
    layui.config({
        //插件layarea.js 位于的路径
        base: '../js/'
        , version: '1.0'
    });
    //一般直接写在一个layarea.js文件中
    layui.use(['layer', 'form', 'layarea'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker',
          /*  change: function (res) {
                //选择结果
                console.log(res);
            }*/
        });
    });
    //获取表单的数据
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(datas){
            $.ajax({
                url:"/modifyStore",
                data:JSON.stringify(datas.field),
                contentType:"application/json;charsetset=UTF-8",
                dataType:"json",
                type:"post",
                success:function(data){
                    console.log(data.msg);
                    layer.msg(data.msg);
                    window.parent.location.reload();
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                   //location.href("/tables"); //删除成功后再刷新
                },
                error:function(data){
                    console.log(data+'errr');
                    layer.msg('添加门店失败!');
                }
            });

            return false;

        });
    });
</script>

</body>
</html>

 

具体操作

form 表单监听了 edti操作 然后在父框设置一个 window.province 这样子框就可以拿到，然后动态赋值

table.on('tool(currentTableFilter)', function (obj) {

    //获取当前行的数据
    var data = obj.data;
    //子框取值
    window.proviceName=data.province;
    window.cityName=data.city;
    window.countyName=data.county;
    console.log( $('.proviceName').val());
    if (obj.event === 'edit') {
        var index = layer.open({
            title: '编辑用户',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['80%', '80%'],
            content: '/modifyStore',
            success:function (layero,index) {
                var body = layer.getChildFrame('body', index);
                //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
                body.find(".id").val(data.id);
                body.find(".hotelName").val(data.hotelName);
                body.find(".layui-textarea").val(data.detailAddress);

            }
        });
        $(window).on("resize", function () {
            layer.full(index);
        });
        return false;
    } else if (obj.event === 'delete') {
        layer.confirm('真的删除行么', function (index) {
            obj.del();
            layer.close(index);
        });
    }
});

 

子框动态赋值给data-value

//省市区三联配置插件目录
$(function () {
    $('.province-selector').attr('data-value',parent.proviceName);
    $('.city-selector').attr('data-value',parent.cityName);
    $('.county-selector').attr('data-value',parent.countyName);
})

 

<div class="layui-input-inline" style="width: 200px; margin-top: 30px;">
    <select name="province" class="province-selector" data-value="湖南省"   lay-filter="province-1">
        <option class="select_provice" value="">请选择省</option>
    </select>
</div>

 

 

 

javahouse的家
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
thinkphp + layui1 省市区联动+全国地区mysql数据库-附件资源
03-02
thinkphp + layui1 省市区联动+全国地区mysql数据库-附件资源
layui的select下拉框插件，可以多选
06-24
在layui中，`select`下拉框插件是用于创建选择项的控件，尤其适用于需要用户从一系列选项中进行多选的情况。在本篇文章中，我们将深入探讨layui的`select`下拉框插件及其多选功能，以及如何在HTML、JavaScript和...
php 省市学校三级联动,thinkPHP实现的省市区三级联动功能示例
weixin_29220405的博客
03-09 238
本文实例讲述了thinkPHP实现的省市区三级联动功能。分享给大家供大家参考，具体如下：一张表实现省市区三级联动【3409条数据】1. php代码：public function index(){$province = M('Tree')->where ( array('pid'=>1) )->select ();$this->assign('province',$prov...
layui扩展件（xm-select）实现下拉框
最新发布
m0_46590717的博客
05-24 1316
layui扩展件（xm-select）实现下拉框
layui省市区自己添加街道和赋值
qq_29072049的博客
02-15 1718
var defaults = { s1: 'provid', s2: 'cityid', s3: 'areaid', v1: null, v2: null, v3: null, v4: false, v5: null }; var $form; var form; var wn; layui.define(['jquery', 'f...
thinkphp + layui1 省市区联动+全国地区mysql数据库
weixin_30613343的博客
03-25 409
后台开发老是遇到涉及地区的地方，于是乎就找了一个插件，基于layui的，因为存数据库还是地区id为好，所改了改，结合数据库使用，感觉挺好的，分享出来，有谁要用的，也方便直接用啦！说明：插件基于layui的，也就是刷新dom用了layui，自己改改就可以不依赖layui了。数据库文件也在压缩包里了，直接导入就好了。下载地址：http://pan.baidu.com/s/1nuLFaJZ;...
网站二开layui+thinkphp之likesohp管理模块添加（小笔记）
qq_58378409的博客
03-14 348
4.在admin管理视图目录下创建user_photo文件夹，这里写员工信息前端显示页相关代码。该lists页面为内容显示前端页，按原编码风格用系统封装layui书写显示页面。3.在admin控制器管理目录下UserPhoto控制器里写lists相关代码。1.likeshop后台管理创建模块分级（二级规则创建要先创建相关控制器）2.数据库随便新建一个数据表ls_user_info用来记录相关数据。创建员工信息管理模块，实现用户信息增删改查，按原代码风格编写。
layui-省市区三联动模块--mods.rar
06-13
本压缩包“layui-省市区三联动模块--mods.rar”是layui框架的一个扩展，专为实现省市区三级联动功能设计。在网页中，这种功能常用于地址选择，用户在选择省份后，市和区会根据所选省份动态加载，为用户提供便捷的...
Layui带搜索的下拉框的使用以及动态数据绑定方法
10-16
今天小编就为大家分享一篇Layui带搜索的下拉框的使用以及动态数据绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决layui 三级联动下拉框更新时回显的问题
10-16
今天小编就为大家分享一篇解决layui 三级联动下拉框更新时回显的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用layui实现省市区及编码联动(引入第三方插件)
。度的博客
06-11 5006
首先看下效果图 一、下载js插件， 百度网盘链接：https://pan.baidu.com/s/1SPN1GW0Y5rGBVq4fIPUDIw 提取码：z578 一、在相关路径下存放 layarea.js 插件，下图是我的存放路径 二、html页面 <!--# layout("/common/layout.html",{"jsBase":"/js/sysStore/"}){ --> <!-- 上面代码是引用的页面js路径--> <f...
layui下拉框获取下拉值(select)的例子
10-16
今天小编就为大家分享一篇layui下拉框获取下拉值(select)的例子，具有好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui编辑页面的数据回显
qq_47944488的博客
08-12 7121
首先我
layui 编辑页面没有等父页面值传入就渲染完了，导致父页面数据没有传入子页面
wuxin_csdn的博客
09-20 1494
使用layui来做后台管理，遇到一个很奇葩的问题： 在list页面列出了所有的记录，然后点击编辑，弹出一个新页面来显示需要修改的字段，然后里面有几个checkbox，使用 body.find("#dwServiceMode1").prop("checked",edit.dwServiceMode==1); 来选中，在回调success：中使用子页面的form.render()来渲染，然...
解析$(this).data('type');
weixin_30414155的博客
11-16 1367
html： <button type="button" class="layui-btn layui-btn-sm" data-type="addRow" title="添加一行"> js： //注册按钮事件 $('.layui-btn[data-type]').on('click', function () { var type = $(this).dat...
Layui 弹出层选择数据实现
bdwl_cn的博客
02-09 2106
实际Web项目中，下拉框仅能实现数据量少的场景，当我们添加一个商品时，我们总希望在添加选择前能看到产品的规格、图片、参数信息，那么用下拉框就显得力不从心了。
layui三方下拉选择插件xmSelect的使用详解
热门推荐
u013105927的博客
06-07 1万+
layui三方下拉选择插件xmSelect的使用详解
LayUI：动态条件检索
dawn0718的专栏
03-16 2371
　　今天晚上在做计算机设备的财务资产核对时，财务表中只有计算机型号可以参考，实物也有计算机型号，只能通过比对认为确定是否核实。 　　即通过拆分实物计算机的型号来查找财务表中的类似设备。 　　上面是默认全选分拆的关键字。 　　通过复选框的组合来搜索设备。 　　不选则为空： 　　选择一个关键字： 　　选择两个关键字： 　　源码文件： <!DOCTYPE html> <html> <head> <meta charset=...
基于layui搜索下拉框插件
墨鱼部落格
04-07 360
基于layui搜索下拉框插件 jQuery基于layui开发。搜索下拉框插件。支持中文、首字母搜索下拉提示列表代码。 演示地址 下载地址
layui带搜索的下拉框 动态请求
06-06
layui是一款基于jQuery的前端UI框架，其下拉框插件中也提供了搜索功能，当选项很多时能方便用户快速定位所要选择的内容。动态请求是指在用户输入搜索关键词后，系统根据关键词发送请求，从后端获取与之相关的选项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值