【JS】给layer弹窗的子页面表单赋值

在系统中经常会用到表格的增删改功能,通过触发编辑按钮事件来弹出表单窗体并给表单的内容项赋值, 这里通过结合layer.js和underscope.js可以轻松的实现此效果:
一 、js代码
我这里的表格用bootstrapTable实现,了解过此插件的猿友应该能读懂,不懂的请查看官网实例,这里我截取其中的一段操作列:

 {
                field: '',
                title: '操作',
                width: 100,
                align: "Center",
                halign: "middle",
                formatter: function (value, row, index) {
                    var obj = JSON.stringify(row);
                   return  " <a  href='#' onclick='editClick(" + obj + ");'  title=''> 编辑 </a>"+ 
		                  " <a  href='#' onclick='deleteClick(" + obj + ");'  title=''> 删除</a>";
                    
                }
            }
//编辑事件
function editClick(row) {
    layer.open({
        type: 2,
        title: '编辑',
        skin: 'layui-layer-rim',
        area: ['60%', '80%'],    //宽高-->
        shadeClose: true,
        scrollbar: false,
        content: 'Edit.html',//弹窗页面的路径
        success: function (index, layero) {
            var pIframe = $('iframe')[0].contentWindow.document;//找到上一级父页面
            var subForm = $(pIframe).find('#editForm');//在父页面里找到editForm表格,这个Id为所编辑form的ID值
            $(pIframe).find(
                _.each(_.pairs(row), function (item) {//row为当前行的数据
                    subForm.find('#' + item[0]).val(item[1]); //前端页面的字段ID需要与name保持一致;这样遍历所有的字段,通过一致的id名可直接给表单里的字段赋值
                }));

        },
        end:function () {
            getTableData();//结束之后请求表格数据的方法,新编辑的数据直接存库并展示在页面
        }
    });
}

二:效果图
这里写图片描述
这里写图片描述

三:参考官网网址:
1.layer.js
2.Underscore.js
3.bootstrap-table

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值