layui 弹窗父子页面数据传输弹窗编辑表格

最新推荐文章于 2025-06-14 10:00:00 发布

原创

最新推荐文章于 2025-06-14 10:00:00 发布 · 3.2k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了如何在layui中实现父子页面之间的数据传输，特别是在弹窗编辑表格场景下，详细阐述了操作步骤和关键代码，帮助开发者理解并掌握这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父页面

layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function () {
    var element = layui.element;
    var table = layui.table;
    var form = layui.form;
    var $ = layui.jquery;
    table.render({
        elem: '#tableId',
        url: '/role/findRoles',
        limit: 10,
        page: true,
        height:480,
        cols: [
            [
            {type: 'checkbox'},
            {field: 'userName', title: '账号', width: 150, sort: true},
            {field: 'userPhone', title: '注册手机号', width: 150},
            {field: 'userEmail', title: '注册邮箱号', width: 150},
            {field: 'role', title: '角色', width: 100},
            {field: 'userProvince', title: '所属省份', width: 150},
            {field: 'userCity', title: '所属地市', width: 150},
            {title: '角色审批', width: 80, templet: '#operationTpl', align: 'center'}
         ]
        ],
        done: function (res, curr, count) {
            $("#countNum").text(count);
        }
    });

table.on('tool(tableFilter)', function (obj) {
    var data = obj.data;
    var layEvent = obj.event;
    if (layEvent === 'edit') {
        json = JSON.stringify(data);
        layer.open({
            title: '用户角色审批',
            type: 2,
            shade: false,
            maxmin: true,
            shade: 0.5,
            area: ['50%', '90%'],
            content: 'roleEdit',
            zIndex: layer.zIndex,
            success : function(layero,