layui框架弹出层layer.open({...})中子页面元素获取父页面中值

本篇文章适合小白，大神靠边站

最终页面效果

直接看代码吧

父页面表格的渲染

table.render({//页面初始化
				elem : '#enterprise',
				page : true,
				method : 'POST',
				url : 'saleinfo/showEnterprise',
				title : '企业预留售票管理',
				cellMinWidth : 80,
				page : true,
				cols : [ [
						{
							sort : true,
							type : 'numbers'
						},
						{
							field : 'sn',
							title : 'ID',
							width : 100,
							unresize : true,
							sort : false,
							hide : true
						},
						{
							type : 'checkbox'
						},
						{
							field : 'lineinfo.linecode',
							title : '列车号码',
							templet : function(d) {
								return d.lineinfo.linecode;
							}
						},
						{
							field : 'username',
							title : '乘客信息',
							templet : function(d) {
								return +d.username + '|' + d.usercard;
							}
						},
						{
							field : 'cometime',
							title : '登车时刻'
						},
						{
							field : [ 'comesite', 'exitsite' ],
							title : '乘客行程',
							templet : function(d) {
								return d.comesite + '--' + d.exitsite;
							}
						},
						{

							field : 'd',
							title : '车票详情',
							templet : function(d) {
								if (d.boxclass == '软卧') {
									return d.boxclass + '|' + d.boxorder + '车|'
											+ d.seat_pai + '排 |' + d.seat_num;
								} else if (d.boxclass == '硬卧') {
									return d.boxclass + '|' + d.boxorder + '车|'
											+ d.seat_pai + '排 |' + d.seat_num;
								} else if (d.boxclass == '硬座') {
									return d.boxclass + '|' + d.boxorder + '车|'
											+ d.seat_num + '号';
								} else {
									return d.boxclass + '|' + d.boxorder
											+ '车|无座';
								}

							}
						}, {
							field : 'isaletwo',
							title : '出售申请状态'
						}, {
							fixed : 'right',
							title : '操作',
							toolbar : '#barDemo',
							width : 160
						}

				] ],
				request : {
					pageName : 'page',
					limitName : 'size'
				}

			});

弹出层页面

<form class="layui-form" lay-filter="component-form-group" id="submits" onsubmit="return false">
            <table id="data" class="layui-table">
			<tr>
				<td class="item">登车时间</td>
				<td>
					<input readonly="readonly" id="inp1" class="layui-input" style="width:250px;" >
				</td>
			</tr>
			<tr>
				<td class="item">车票信息</td>
				<td><input readonly="readonly" id="inp2" class="layui-input" style="width:250px;">
					
				</td>
			</tr>
			<tr>
				<td class="item">乘客姓名</td>
				<td>
					<input id="username" name="username" class="layui-input" style="width:250px;" placeholder="请使用扫描设备读取乘客姓名"/>
					
				</td>
			</tr>
			<tr>
				<td class="item">乘客身份</td>
				<td>
					<input id="usercard" name="usercard" class="layui-input" validType="idCode" required="required" style="width:250px;" placeholder="请使用扫描设备读取乘客身份"/>
					
				</td>
			</tr>
			<tr>
				<td colspan="2"><center><a class="linker" href="javascript:void(0);" onClick="readwinIDCard();">读取身份证信息</a></center></td>
			</tr>
		</table>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-footer"  align="center">
                        <button class="layui-btn" lay-submit="" lay-filter="feedback_submit" style="">立即提交</button>
                    </div>
                </div>
            </div>
        </form>

从父页面点击按钮弹出子页面

//监听行内工具条
			table.on('tool(enterprise)', function(obj) {
				var data = obj.data;
				if (obj.event === 'specified') {
					layer.open({
						title:['指定乘客','font-size:18px;'],
	                    type: 2,
	                    area: ['600px', '400px'], //宽高
	                    content: 'static/ticket/reserved/enterprise/specified.html',
	                    scrollbar:false,
	                    success:function(layero, index){

	                     //   var win=$(layero).find("iframe")[0].contentWindow;
	                     //  var formSubmit=layer.getChildFrame('#inp1', index);
							//获取子页面中的元素，给元素传值。两种方法都可行
	                        var inp = $(layero).find("iframe").contents().find("#inp1");
	                        inp.val(data.cometime);
	                         inp = $(layero).find("iframe").contents().find("#inp2");
	  						
	                   
	                    }
	                });

	
				} else if (obj.event === 'print') {
					layer.confirm('是否打印车票', function(index) {

						layer.close(index);
					});
				}
			});

重点

两张图片中两个红框标注的内容必须相同；绿框中的内容为按钮所在行的所有数据，可以根据字段的名称获取其中的值。

最近再用layui写一个项目，之前没学过，所以在实践的过程中有许多的坎坷，查阅了很多资料，最后做个总结。请大家多多指教。