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; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） userId = data.id;//获取选中行的对象的id值 if(layEvent === 'detail'){
//查看 //点击查看按钮后，打开弹出层 layer.open({
type: 2//这就是定义窗口类型的属性 ,title:"详情" ,shade: 0.3 ,offset: "20%" ,area: ['60%', '60%'] ,btn: '确定' ,content:"showObj.html?robot="+userId //实际开发中传入真实iframe地址 ,yes: function(index, layero){
layer.close(index); //关闭弹层 } }); } else if(layEvent === 'del'){
//删除 //doSomething } else if(layEvent === 'edit'){
//编辑 //do something } }); - 点击查看跳出的iframe子页面的html
<div style="padding: 20px; background-color: #F2F2F2;"> <form class="layui-form" action="" lay-filter="showExample" > <div class="layui-card-body"> <div class="layui-row"> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12"> <div class="layui-form-item"> <label class="layui-form-label">编号：</label> <div class="layui-input-block"> <input type="text" name="id" id="id" required lay-verify="required" placeholder="请输入编号" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12"> <div class="layui-form-item"> <label class="layui-form-label">姓名：</label> <div class="layui-input-block"> <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12"> <div class="layui-form-item"> <label class="layui-form-label">详情：</label> <div class="layui-input-block"> <input type="text" name="des" id="des" required lay-verify="required" placeholder="请输入详情" autocomplete="off" class="layui-input"> </div> </div> </div> </form> </div> </div> 注意：要有form标签
- iframe子页面的js操作具体代码
<script> layui.config({
base: '../layuiadmin/' //静态资源所在路径 }).extend({
index: 'lib/index' //主入口模块 }).use(["index","form"],function(){
var $ = layui.$ ,admin = layui.admin ,form = layui.form; //请求ajax获取机器人信息 admin.req({
url:"xxxx", //开发时传入真实接口 success:function(data){
form.val("showExample", data); } }) }); </script> - 贴一下json模拟的数据
{
"code": "0", "msg": "正常"， "id": 1, "name": "123", "des": "werw" } 这里面的id,name,des对应的是input标签中的name属性
6. 查看一下返回的数据
返回的数据如果跟json数据一样，那就是正确的。
参考网址：https://www.layui.com/demo/form.html
结束语：刚开始接触这个框架，很多不明白的地方，踩了不少坑，也写了很多冗余代码，还在不断学习中。
目前只写到这里，后期会继续更新 编辑 和 删除 功能，有不足之处，欢迎各位大佬指教，欢迎各位留言讨论，一起学习~~嘻嘻
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/233329.html原文链接：https://javaforall.net
