layuiadmin中，关于工具栏tool中查看功能具体怎么实现的问题

最新推荐文章于 2025-07-18 12:17:02 发布

不一样的程序媛

最新推荐文章于 2025-07-18 12:17:02 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：项目总结文章标签： layuiadmin

本文链接：https://blog.youkuaiyun.com/weixin_42985225/article/details/83536730

本文介绍了在layuiadmin框架下，如何实现在表格工具栏点击查看时弹出iframe子页面的功能。作者分享了父页面和iframe子页面的HTML及JS代码，并提供了模拟数据，展示了正确返回数据的示例。文章适合前端新手学习，作者表示后续将更新编辑和删除功能。

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

layuiadmin表格中的tool，点击查看时跳出iframe子页面的操作问题

最近在用闲心大佬的layuiadmin框架开发项目，作为一个前端小白，秉承着学习并总结的习惯写下这个博客，话不多说，上代码。

先看下父页面的html，这边我只截取部分代码，有用的就行

	<!-- 表格  -->
	  <div class="layui-card-body">
	    <table id="goodsTypeGrid" lay-filter="goodsTypeGrid" class="layui-table"></table>
	  </div>
	<!-- 操作栏 -->
	<script type="text/html" id="goodsGrid-edit">
  		<a class="layui-btn layui-btn-xs show" lay-event="detail">查看</a>
  		<a class="layui-btn layui-btn-xs edit" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs  del" lay-event="del">删除</a>
	</script>

父页面点击查看的具体操作的js

  //监听工具条
	table.on('tool(goodsTypeGrid)', function(obj){
   
    //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据