layuiadmin 에서 도구 모음 tool 의 편집 기능 이 구체 적 으로 어떻게 실현 되 는 지 에 대한 문제

layuiadmin 표 의 tool, 편집 을 누 르 면 iframe 하위 페이지 의 동작 문제 가 발생 합 니 다.
이어서 지난 블 로 그 는 계속 되 었 습 니 다. 오늘 말 한 것 은 주로 편집 한 것 입 니 다. 편집 은 사실 조회 와 차이 가 많 지 않 습 니 다. 자, 코드 를 올 리 세 요. 제 가 지난 편 에서 보 았 던 것 을 뒤 져 보고 다른 점 을 찾 아 보 세 요.

먼저 아버지 페이지 의 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'){ //  
	  	//doSomething
	  } else if(layEvent === 'del'){ //  
		//doSomething
	  } else if(layEvent === 'edit'){ //  
	     layer.open({
	            type: 2//            
	            ,title:"  "
	            ,shadeClose: true
	            ,shade: 0.3
	            ,offset: "20%"
	            ,area: ['60%', '60%']
	            ,btn:  ['  ', '  ']
	           	,content:"editObj.html?robot="+userId   //         iframe  
	           	,yes: function(index, layero){
	           	 var field = data.field; //       
			           	admin.req({
							type:'post',
							url: 'http://10.0.65.101:8091/app/mock/18/save',  //         
							data: data ,
							success: function (data) {
								if (data.code == 0) {
									location.reload();//   
								}
								layer.msg(data.msg);
							},
							error: function () {
								layer.msg("    ");
								return false;
							}
						}) 
			           	 	layer.close(index); //    
	            }
		   });
	  }
	});

뛰 어 나 온 iframe 하위 페이지 의 html

편집 을 누 르 십시오.

<div style="padding: 20px; background-color: #F2F2F2;">
	<form class="layui-form" action="" lay-filter="editExample" >
        <div class="layui-card-body">
          <form class="layui-form" action="">
	    		<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>

iframe 하위 페이지 의 js 작업 구체 적 인 코드

  layui.config({
      base: '../layuiadmin/' //        
    }).extend({
      index: 'lib/index' //     
    }).use(["index","form"],function(){
  	  var $ = layui.$
  	  ,admin = layui.admin
  	  ,form = layui.form;
  
	  //  ajax       
  	  admin.req({
  		  	url:"http://10.0.65.101:8091/app/mock/18/robot/show",  //json  ，         
	  		success:function(data){
	  			form.val("editExample", data);
	  		  }
  	  })
    });
  

제 이 슨 이 모 의 한 데 이 터 를 붙 여 주세요

{
  "code": 0,
  "msg": "    "
}
  

되 돌아 오 는 데 이 터 를 확인 해 보 세 요

돌아 온 데이터 가 제 이 슨 데이터 와 같다 면 정확 한 것 입 니 다.
마무리 멘 트: 가 까 운 시일 내 에 헤드 도구 모음 대량 삭제 와 추가 가 완 선 됨 을 알려 드 리 겠 습 니 다. 여러분 이 함께 공부 하 시 길 바 랍 니 다. 부족 한 점 이 있 으 면 지적 해 주세요 ~ ~ ~