layuiadmin表格中的tool，點(diǎn)擊查看時(shí)跳出iframe子頁(yè)面的操作問題

最近在用閑心大佬的layuiadmin框架開發(fā)項(xiàng)目，作為一個(gè)前端小白，秉承著學(xué)習(xí)并總結(jié)的習(xí)慣寫下這個(gè)博客，話不多說，上代碼。

先看下父頁(yè)面的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>

父頁(yè)面點(diǎn)擊查看的具體操作的js

//監(jiān)聽工具條table.on('tool(goodsTypeGrid)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)var layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值（也可以是表頭的 event 參數(shù)對(duì)應(yīng)的值）userId = data.id;//獲取選中行的對(duì)象的id值if(layEvent === 'detail'){ //查看//點(diǎn)擊查看按鈕后，打開彈出層layer.open({type: 2//這就是定義窗口類型的屬性,title:"詳情",shade: 0.3,offset: "20%",area: ['60%', '60%'],btn: '確定',content:"showObj.html?robot="+userId //實(shí)際開發(fā)中傳入真實(shí)iframe地址,yes: function(index, layero){layer.close(index); //關(guān)閉彈層}});} else if(layEvent === 'del'){ //刪除//doSomething} else if(layEvent === 'edit'){ //編輯//do something}});

點(diǎn)擊查看跳出的iframe子頁(yè)面的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">編號(hào)：</label><div class="layui-input-block"><input type="text" name="id" id="id" required lay-verify="required" placeholder="請(qǐng)輸入編號(hào)" 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="請(qǐng)輸入姓名" 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="請(qǐng)輸入詳情" autocomplete="off" class="layui-input"></div></div></div></form> </div> </div>

注意：要有form標(biāo)簽

iframe子頁(yè)面的js操作具體代碼

<script>layui.config({base: '../layuiadmin/' //靜態(tài)資源所在路徑}).extend({index: 'lib/index' //主入口模塊}).use(["index","form"],function(){var $ = layui.$,admin = layui.admin,form = layui.form;//請(qǐng)求ajax獲取機(jī)器人信息admin.req({url:"xxxx", //開發(fā)時(shí)傳入真實(shí)接口success:function(data){form.val("showExample", data);}})}); </script>

貼一下json模擬的數(shù)據(jù)

{"code": "0","msg": "正常"，"id": 1,"name": "123","des": "werw" }

這里面的id,name,des對(duì)應(yīng)的是input標(biāo)簽中的name屬性
6. 查看一下返回的數(shù)據(jù)

返回的數(shù)據(jù)如果跟json數(shù)據(jù)一樣，那就是正確的。

參考網(wǎng)址：https://www.layui.com/demo/form.html

結(jié)束語：剛開始接觸這個(gè)框架，很多不明白的地方，踩了不少坑，也寫了很多冗余代碼，還在不斷學(xué)習(xí)中。
目前只寫到這里，后期會(huì)繼續(xù)更新 編輯 和 刪除 功能，有不足之處，歡迎各位大佬指教，歡迎各位留言討論，一起學(xué)習(xí)~~嘻嘻

總結(jié)

以上是生活随笔為你收集整理的layuiadmin中，关于工具栏tool中查看功能具体怎么实现的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。