讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui弹出层iframe页面如何获取父页面表格中选中的数据

冬婷大大_1829

冬婷大大_1829

发布时间:2026-06-20 07:05:01

|

649人浏览过

|

来源于php中文网

原创

应通过父页面显式设置表格id并监听checkbox事件,将选中数据存入window.parent.selectedRows,iframe内读取该变量;若父页未配合,则无法可靠获取选中数据。

layui弹出层iframe页面如何获取父页面表格中选中的数据

iframe弹层里怎么拿到父页面表格选中的行数据

直接用 window.parent 访问父页面的 Layui 数据表格实例,但前提是父页面表格启用了 id(不是 class)且你保存了选中行数据——Layui 的 table.checkStatus() 不会自动跨 iframe 生效。

父页面必须给 table 设置 id 并监听 checkbox 选择

没设 id 的表格,子 iframe 根本找不到对应实例;只靠 lay-filter 是不够的。正确做法是:

  • 初始化表格时显式传入 id: 'userTable'(字符串唯一)
  • 在父页面绑定 tool 或 checkbox 事件,把选中数据存到全局变量或 window.parent.selectedRows
  • 避免依赖 layui.table.cache —— 它只存原始数据,不反映实时勾选状态

示例(父页面):

layui.table.render({
  elem: '#userTable',
  id: 'userTable', // ← 必须有
  url: '/api/users',
  cols: [[{type: 'checkbox'}, {field: 'name', title: '姓名'}]],
  done: function() {
    // 可选:初始加载后主动缓存一次空数组
    window.parent.selectedRows = [];
  }
});

layui.table.on('checkbox(userTable)', function(obj) {
  const rows = layui.table.checkStatus('userTable').data;
  window.parent.selectedRows = rows; // ← 暴露给 iframe
});

iframe 页面通过 window.parent.selectedRows 读取(最简路径)

这是最稳定、兼容性最好的方式,绕过所有跨域和实例查找问题。注意:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 不要在 iframe 页面 onload 里立刻读取 —— 父页面事件可能还没触发,建议加简单轮询或用 setTimeout 延迟 100ms
  • 如果父页面没定义 selectedRows,window.parent.selectedRows 是 undefined,需判空
  • 不能用 layui.table.checkStatus('userTable') 在 iframe 里调 —— 表格实例不在当前上下文,会报 Uncaught TypeError: Cannot read property 'config' of undefined

示例(iframe 页面):

function getSelectedFromParent() {
  const rows = window.parent.selectedRows;
  if (rows && rows.length) {
    console.log('拿到选中数据:', rows);
    return rows;
  }
  setTimeout(getSelectedFromParent, 100); // 等父页面写入
}
getSelectedFromParent();

如果父页面无法改代码,只能尝试跨 iframe 查表实例(高风险)

仅限同域且父页面未压缩变量名时可用,实际项目中容易失效:

  • window.parent.layui.table 存在,但 window.parent.layui.table.getCheckData('userTable') 已废弃(Layui 2.8+ 不再支持)
  • 试图用 window.parent.layui.table.cache['userTable'] 拿不到勾选状态,它只存原始响应数据
  • 通过 window.parent.document.getElementById('userTable') 找不到表格 DOM 中的 checkbox 状态,因为 Layui 渲染的是虚拟 DOM 节点

结论:没有父页面配合,iframe 几乎无法可靠获取选中数据。强行 hack 容易在 Layui 升级后崩。

真正麻烦的地方不是语法,而是父子通信时机和数据同步责任归属 —— 很多人卡在 iframe 加载太快,而父页面的 checkbox 事件还没注册完。

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2323

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4983

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6070

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5598

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

783

2024.05.22

iframe写法有哪些
iframe写法有哪些

iframe写法有基本Iframe写法、嵌套Iframe写法、自适应宽高的Iframe写法、带有样式和属性的Iframe写法、内联Iframe写法和使用JavaScript动态创建Iframe写法。种写法都有自己的特点和适用场景。根据实际需求,选择合适的写法可以实现所需的功能和效果。

2123

2023.10.19

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

100

2026.09.30

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

100

2026.09.30

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

80

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn