预想效果:
选择某行后,单击编辑按钮,获取到选择的行的数据
实现:
表格使用datatables,自定义编辑按钮:
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5',
'print',
{
text: '编辑',
className: 'editRow',
},
]
按钮事件:
$('.mytable').on('click', '.editRow', function () {
var table = $('#table_id_example').DataTable();
var rowData = table.rows({selected: true}).data()[0];
if (rowData) {
layer.open({
title: this.text,
type: 2,
skin: 'layui-layer-rim', //加上边框
area: [window.screen.width / 2 + 'px', window.screen.height / 2 + 'px'], //宽高
maxmin: true, //开启最大化最小化按钮
content: "taskDetail.html",
success: function (layero, index) {
// 获取子页面的iframe
var iframe = window['layui-layer-iframe' + index];
// 向子页面的全局函数child传参
iframe.child(rowData);
}
})
} else {
alert("先选择行")
}
})
.mytable是一个div,包裹了我们的表格
taskDetail.html是我们的子页面,其中有一个全局函数child:
<script>
function child(d) {
alert(d)
}
</script>
细节之处暂时忽略,有空再补。
参考资料:http://fly.layui.com/jie/2148/