layui中弹出层的使用
本篇文章适合小白,大神靠边站
最终页面效果
直接看代码吧
父页面表格的渲染
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写一个项目,之前没学过,所以在实践的过程中有许多的坎坷,查阅了很多资料,最后做个总结。请大家多多指教。