layuiadmin表格中的tool，點選編輯時跳出iframe子頁面的操作問題

最近在用閒心大佬的layuiadmin框架開發專案，作為一個前端小白，秉承著學習並總結的習慣寫下這個部落格，話不多說，上程式碼。

1. 先看下父頁面的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>

2. 父頁面點選檢視的具體操作的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
	  }
	});

3. 點選檢視跳出的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標籤

4. 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>

5. 貼一下json模擬的資料

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

這裡面的id,name,des對應的是input標籤中的name屬性 6. 檢視一下返回的資料

返回的資料如果跟json資料一樣，那就是正確的。

結束語：剛開始接觸這個框架，很多不明白的地方，踩了不少坑，也寫了很多冗餘程式碼，還在不斷學習中。 目前只寫到這裡，後期會繼續更新 編輯 和 刪除 功能，有不足之處，歡迎各位大佬指教，歡迎各位留言討論，一起學習~~嘻嘻