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

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

接着上一篇博客继续，今天说的主要就是编辑了，编辑其实跟查看差不多，来，上代码，你们可以翻看一下我上一篇关于查看的，找一下不同之处。

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'){ //查看
	  	//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); //关闭弹层
	            }
		   });
	  }
	});

3. 点击编辑跳出的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>

4. 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);
	  		  }
  	  })
    });
  

5. 贴一下json模拟的数据

{
  "code": 0,
  "msg": "修改成功"
}
  

6. 查看一下返回的数据

返回的数据如果跟json数据一样，那就是正确的。

结束语：近期会把头工具栏的批量删除与添加完善好了贴出来，希望大家一起学习，有不足之处麻烦指正一下~~~