精华内容
下载资源
问答
  • 以下演示的是把layui表格中当前行数据传到子页面,常用情况:编辑 本内容相关的项目实现系统已发布,收银员账号密码:1001密码123,源码可以到主页下载 layui表格的cols cols: [[ {type: "checkbox", fixed: ...

    当在一个页面点击一个按钮后弹出一个iframe,如何让改页面的数据传到子页面iframe的文本框等。以下演示的是把layui表格中当前行数据传到子页面,常用情况:编辑

    本内容相关的项目实现系统已发布点此查看,收银员账号密码:1001密码123,源码可以到主页下载

    layui表格的cols
    
    		cols:
                    [[
                        {type: "checkbox", fixed: "left"},
    
                        {field: 'gid', width: 80, title: 'ID', sort: true,align:"center"},
                        {field: 'gno', width: 110, title: '商品编号',align:"center"},
                        {field: 'gname', width: 200, title: '商品名称', sort: true,align:"center"},
    
                        {field: 'price', title: '原价', minWidth: 80, sort: true,align:"center"},
                        {field: 'isBargainPrice', width: 110, title: '是否特价',align:"center"},
                        {field: 'bargainPrice', width: 110, title: '特价价格', sort: true,align:"center"},
                        {field: 'unit', title: '单位', minWidth: 80, sort: true,align:"center"},
                        {field: 'stock', width: 110, title: '库存余量', sort: true,align:"center"}
                        , {title: '操作',width:120, toolbar: '#currentTableBar', align: "center", fixed: "right"}
    
                    ]],
    
    我这里是通过点击layui的tool的编辑按钮(表格行的最后的按钮)弹出一个iframe,下面是点击按钮后传输数据的方法,同时打开子页面
    
     if (obj.event === 'edit'&&identify=="管理员") {
    
                    var index = layer.open({
                        title: '编辑商品',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/editGoods',
                        success:function () {
                            //表单数据回显,把表格当前行显示到子页面的表单内,find后括号内的是子页面表单的id
                            var body = layer.getChildFrame('body',index); body.find("#gid").val(data.gid);
                            var body = layer.getChildFrame('body',index); body.find("#gno").val(data.gno);
                            var body = layer.getChildFrame('body',index); body.find("#gname").val(data.gname);
                            var body = layer.getChildFrame('body',index); body.find("#price").val(data.price);
                            var body = layer.getChildFrame('body',index); body.find("#bargainPrice").val(data.bargainPrice);
                            var body = layer.getChildFrame('body',index); body.find("#unit").val(data.unit);
                            var body = layer.getChildFrame('body',index); body.find("#stock").val(data.stock);
                        }
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                } 
    
    子页面iframe的代码,表格数据都将映射到对应id的表单内,编辑完成后有一个保存按钮,点击保存按钮则关闭当前子页面。
    
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">当前商品id</label>
            <div class="layui-input-block">
                <input type="text" name="gid" readonly="readonly" id="gid" lay-verify="required"
                       value="" class="layui-input">
                <tip>不可编辑。</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">商品编号</label>
            <div class="layui-input-block">
                <input type="text" readonly="readonly" lay-verify="number|required" placeholder="请输入卡号"name="gno" id="gno"
                       class="layui-input">
            </div>
        </div>
    
    
        <div class="layui-form-item">
            <label class="layui-form-label required">商品名称</label>
            <div class="layui-input-block">
                <input type="text" lay-verify="required" name="gname" id="gname" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">原价</label>
            <div class="layui-input-block">
                <input type="number" lay-verify="required|number" name="price" id="price" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">是否特价</label>
            <div class="layui-input-inline">
                <select name="isBargainPrice" id="isBargainPrice">
    
                    <option value=""></option>
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">特价价格</label>
            <div class="layui-input-block">
                <input type="number" lay-verify="required|number" name="bargainPrice" id="bargainPrice" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">单位</label>
            <div class="layui-input-inline">
            <select name="unit" id="unit" lay-search="">
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value="千克">千克</option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
    
            </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">库存</label>
            <div class="layui-input-block">
                <input type="number" lay-verify="required|integer" name="stock" id="stock" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
    </div>
    
    保存按钮退出iframe事件,当然数据也将传送到后端
    
    //监听提交
            form.on('submit(saveBtn)', function (data) {
    
                var goods = JSON.stringify(data.field)
                $.ajax({
                    type: "POST",
                    url: "/updateGoods",
                    data:goods,
                    contentType: "application/json;charset=utf-8",
                    //async:false,
                    success: function (result) {
                        if (result == "更新失败") {
                            alert("网络不佳!请稍后重试")
                        }
    
                    },
                    error: function (data, status, e) {
                        alert("网络不佳!请稍后重试");
                    }
                })
    
    
                var index = layer.alert("修改成功", {
                    title: '提示'
                }, function () {
    
                    // 关闭弹出层
                    layer.close(index);
    
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    //更新父页面的表格
                    window.parent.location.reload();
                    parent.layer.close(iframeIndex);
    
                });
    
                return false;
            });
    
    展开全文
  • layui修改页面layer.open弹出层给子页面赋值 layer.open({ title: '信息维护', type: 2, shade: false, maxmin: true, shade: 0.5, anim: 1, area: ['850px', '95%'], content: basePath+'/jsp/info.jsp', ...

     layui中修改页面layer.open弹出层给子页面赋值

    layer.open({
            title: '信息维护',
            type: 2, shade: false, maxmin: true,
            shade: 0.5, anim: 1, area: ['850px', '95%'],
            content: basePath+'/jsp/info.jsp',
            success: function(layero, indexx){
                var obj={name:'张三',sex:'1'};
               
                var body = layer.getChildFrame('body', indexx);
                //获取content的窗口
                var iframeWin = layero.find('iframe')[0].contentWindow;
                body.find("#name").val(obj.name);
                body.find("#sex").val(obj.sex);
                iframeWin.layui.form.render();
            }
        });

     layui中修改页面layer.open弹出层给父页面赋值

    layer.open({
            title: '信息维护',
            type: 2, shade: false, maxmin: true,
            shade: 0.5, anim: 1, area: ['850px', '95%'],
            content: basePath+'/jsp/info.jsp',
            success: function(layero, indexx){
               var pIframe = $('iframe')[0].contentWindow.document;//找到上一级父页面
               var subForm = $(pIframe).find('#updatefm');
                /* 指定id直接赋值
            subForm.find('#_DATE').val(obj.VC_DATE);
                        subForm.find('#VC_PERSONS').val(obj.VC_PERSONS);
                        */
    
                    //将表单序列化,挨个赋值
                        var dd = $(subForm).serializeArray();
                        $.each(dd, function (i, item) {
                            subForm.find('#' + item.name).val(obj[item.name]);
                        });
                        $('iframe')[0].contentWindow.renderform();
            }
        });

     

    展开全文
  • 父页面: <button class="layui-btn" data-type="getCheckData"> <i class="layui-icon">&#xe61f;</i>修改 </button> 父页面js: getCheckData:function () { var checkStatus = table...

    父页面:

    <button class="layui-btn" data-type="getCheckData">
    	<i class="layui-icon">&#xe61f;</i>修改
    </button>
    

    父页面js:

    getCheckData:function () {
       var checkStatus = table.checkStatus('workerList');
       console.log(checkStatus)
       data = checkStatus.data;
       //console.log(data)
       if (data.length==1) {
          layer.open({
             title: this.text,
             type: 2,
             skin: 'layui-layer-rim', //加上边框
             area: [window.screen.width / 2 + 'px', window.screen.height / 2 + 'px'], //宽高
             maxmin: true, //开启最大化最小化按钮
             content: "edit.html",
             success: function (layero, index) {
                // 获取子页面的iframe
                var iframe = window['layui-layer-iframe' + index];
                // 向子页面的全局函数child传参
                iframe.child(data);
             }
          })
       } else {
          alert("请选择一行")
       }
    }
    

    子页面:写入单独的js文件 元素属性获取不到

    <script>
        function child(data) {
            $("input[name='workerId']").val(data[0].worker_id);
            $("input[name='account']").val(data[0].account);
            $("input[name='password']").val(data[0].password);
            $("input[name='carameId']").val(data[0].carame_id);
            $("input[name='workCityNames']").val(data[0].work_city_names);
        }
    </script>
    

    在这里插入图片描述
    ps:有什么问题多多指教

    展开全文
  • 也是从网上找的方法 记录下来。 layer.open({ ... title: '修改用户', shadeClose: true, //shade: 0.8, area: ['600px', '300px'], content: '/cate/admin-edit?id='+id, success : function(laye...
    也是从网上找的方法 记录下来。
    
    layer.open({
        type: 2,
        title: '修改用户',
        shadeClose: true,
        //shade: 0.8,
        area: ['600px', '300px'],
        content: '/cate/admin-edit?id='+id,
        success : function(layero, index) {
            var body = layer.getChildFrame('body', index); //得到子页面层的BODY
            //查找body旗下input框,设置框内默认值为:applicant
            body.find('#HiddenVal').val(cateid);
        }
    });
    展开全文
  • LayUi子页面给父页面赋值

    千次阅读 2019-11-04 16:27:32
    //卡片数据保存成功回调 this.afterCardSaveComplete = function(){ console.log("-----------卡片数据保存成功回调--------------"); var repairDate=$("#fprRepairDate").val(); window.parent.$("input[id=...
  • layui子页面数据改变刷新父页面

    千次阅读 2019-04-15 20:11:15
    如下图:点击父页面按钮,弹出框,在弹出框内输入完信息后,父页面内的数据需要主动刷新下; 这里需要注意,由于使用框架本身的form监听提交事件,所以在提交成功后子页面会默认刷新下。导致用户体验很不好; ...
  • Layui子页面向父页面传值(亲测有用)场景描述代码实现 场景描述 有一个列表,编辑某一列的信息时首先会弹出一个子页面,如图: 在这个子页面上可以修改单个信息,修改区域的时候由于需要下拉框,因此又会弹出一个子...
  • layui 子页面传值到父页面

    千次阅读 2019-09-12 05:54:38
    layer.open({ type: 2, title: '修改', skin: 'layui-layer-molv', area: ['60%', '90%'], ...
  • 场景: 父级页面是列表页,当父级页面点击搜索新闻时,弹出子...思路:(在父页面中定义方法,子页面中拿到父页面的方法,用方法的参数进行传值) 1.实现打开子窗口,子窗口的type:2,在页面中进行表单数据的获取...
  • 在list页面列出了所有的记录,然后点击编辑,弹出一个新页面来显示需要修改的字段,然后里面有几个checkbox,使用 body.find("#dwServiceMode1").prop("checked",edit.dwServiceMode==1); 来选中,在回调success...
  • 1 ,父页面js layer.open({ type: 2, title: '修改数据', shadeClose: false, shade: 0.8, area: ['60%', '60%'], co...
  • 版权声明:请勿用于任何...//假设父页面有一个input: <input type='text' id='demo' name='code' value='zhangsan'/> //子页面要修改/获取该input的方法: $("#demo" , window.parent.document).val('李四'); /
  • LayUI table 刷新页面不重置页码包含table.js被修改的源码及demo使用方法
  • //父页面 小小提示层 父页面 <script src="../jquery-1.9.1.min.js"></script> <script src="layer/layer.js"></script> $(function(){ $("#parentIframe").click(function(){ var a = $(this).attr("data-...
  • 首先我们双击行数据父页面打开一个/reconciliation/queryAllInfo子页面窗口 layui.use(['table', 'admin', 'ax'], function () { var $ = layui.$; var table = layui.table; var $ax = layui.ax; var admin = ...
  • 个人对 layui 页面渲染的理解 1. 需要满足的条件 表单体系所在的元素加上class="layui-form",这样你里面所包含的元素就可以被 layui 渲染 2. 渲染的本质 原有的html标签不做改变,并对其进行隐藏,依据 layui ...
  • 使用layui后台模板时发现原生的新增,关闭tab选项卡功能有问题。以下是可实现的代码: 1.新增$('#aaa').on('click', function () { var e = $(this), i = '../Departments/Index', t = 222; layui.router(); ...
  • 1、layer弹框父页面调用子页面的方法 var minSpeak = layer.open({ type: 2, min: function(){ $('.layui-layer').css({ 'top': 'auto', 'left': 'auto', 'bottom': '27px', 'right': '0' }) }, ...
  • 1、在父页面定义一个变量来判断是否需要刷新 var reload_flag = 0; 2、在子页面中修改该变量的值 parent.reload_flag = 1; 3、在父页面的弹出层关闭时通过该变量的值判断是滞需要刷新,使用layer.open的end事件 ...
  • 1.最近在公司用springboot写项目,前段框架用的Layui。有一个需求,自己是用的是一个tab,然后每个tab里面用的是table去填充数据,用户在每个table页去进行添加数据,添加完成之后,不能去刷新整个页面,只能去刷新...
  • 尝试使用下面3种方法解决,但是失败了,最后还是通过layui的弹出框解决的。 1、直接在子页面写弹框代码及弹框定位样式; 2、父页面放空div,覆盖整个父页面; 3、使用 $.load() 加载弹框内容
  • 场景:数据表格页面页面1),点击添加数据按钮,弹出子页面form表单(页面2),提交数据成功后,(页面2)再弹出confirm弹出层, 关闭弹出层以及页面2并重载页面1的数据表格 form.on("submit(studentAdd)",...
  • layui使用layer对象的index来防止多窗口id冲突,但是打开iframe窗口时会产生新的layer对象,所以子窗口的layer.index重新从0开始计算,如果子页面打开iframe窗口次数过多,会让layer.index++至父页面相同的值,此时...
  • 在弹出层layer之前,使用parent来操作,指定弹出到父页面上, 但是会出现,点击list页面添加按钮,没有任何的反应。 parent.layer.open为什么用不了的解决办法 父页面也需要 1.引入 layui.js 2. layui.use(['table',...
  • var index = layer.open({ ... title: ["修改", "background-color:#1E9FFF;color:#fafafa;"], area: ['100%', '100%'], content: './pages/commodityPreferenceStrategy_edit.html', succes...
  • var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layui.table.reload('test-table-toolbar'); parent.layer.close(index...layui返回父级页面并刷新父级页面表格(单页刷新)
  • 然后主管又提了一个需求,就是我们使用的是layui多标签iframe框架,当不在某个页面的iframe时不要执行定时器。我觉得这是一个挺不错的提议,而且实现起来也不难。 粗略地考虑有两个思路,一个是点击标签时开启或...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 887
精华内容 354
关键字:

layui修改父页面