父页面的部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是父页面</div>
<iframe src="./test.html" allowTransparency="true" scrolling="aut" id="detail" frameborder="1" width="100%" onLoad="onLoad()"></iframe>
</body>
<script src="./js/jquery.min.js"></script>
<script>
window.onLoad = () => {
var obj = $('#detail')[0].contentWindow; // contentWindow属性是指指定的frame或者iframe所在的window对象
obj.postMessage('我是父页面','*');//父页面传递消息给子页面
window.onmessage = function (e) {//父页面监听子页面传递过来的消息
var obj = e.data;
console.log('=***==',obj);
$('#detail').css('height', obj.height);//拿到子页面传递的消息后进行赋值
}
}
</script>
</html>子页面的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui-v2.7.6/layui/css/layui.css">
<style>
html { overflow-x:hidden; }
.tableBox{
width: 100vw;
height:350px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="tableBox">
<table id="demo" lay-filter="test"></table>
</div>
</body>
<script src="./layui-v2.7.6/layui/layui.js"></script>
<script src="./js/jquery.min.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 300
,url: './json/test.json' //数据接口
,page: false //开启分页
, cols: [[
{ field: 'id', title: '序号', align: "center", },
{ field: 'wenhao', title: '文号', align: "center", width: "35%" },
{ field: 'title', title: '标题', align: "center" },
{ field: 'fenlei', title: '主办部门', align: "center" },
{ field: 'time', title: '信访日期', align: "center", width: "15%" },
]]
,done: function (res, curr, count) {
mergeRows(res)
}
});
});
function mergeRows(res) {
console.log(res);
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
var columsName = ['id','wenhao','title'];//需要合并的列名称
var columsIndex = [0,1,2,3];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $('div[lay-id="demo"] .layui-table-body>.layui-table').find("tr");//所有行，如果页面多个表格，这里一定要定位到你所要合并的表格
console.log($('div[lay-id="demo"] .layui-table-body>.layui-table').find("tr"));
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
mark += 1;
tdPreArr.each(function () {//相同列的第一列增加rowspan属性
$(this).attr("rowspan", mark);
});
tdCurArr.each(function () {//当前行隐藏
$(this).css("display", "none");
});
}else {
mergeIndex = i;
mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
}
}
mergeIndex = 0;
mark = 1;
}
}
window.onmessage = function (e) {
//获取iframe嵌套的子页面的高度
var height = Number(document.body.getBoundingClientRect().height) +30;
var obj = {
height,
}
//将子页面的高度传递给父页面
top.postMessage(obj, '*')
}
</script>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/79808.html
