Table列展开与收起Demo
Posted yzyh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Table列展开与收起Demo相关的知识，希望对你有一定的参考价值。
导读： 此文章用于实现列的隐藏或显示 用的jquery，vue 或 react 思路一致，事件改变数据，数据影响视图~
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Table列展开与收起Demo</title>
<style>
th,
td {
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0">
<thead>
</thead>
<tbody>
</tbody>
</table>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
/**
* mock数据
* btn: 描述该字段用于点击按钮
* flage: 用于描述该字段会根据按钮的点击显示 隐藏状态会发生改变
* isShow: 用于决定该字段是否用于渲染
*/
var header = [
{ value: '666', isShow: true },
{ value: '收起', isShow: true, btn: true },
{ value: '子集1', isShow: true, flage: true },
{ value: '子集2', isShow: true, flage: true },
{ value: '666', isShow: true },
{ value: '666', isShow: true },
{ value: '666', isShow: true }
]
var bodys = [
{
datas: [
{ value: '777', isShow: true },
{ value: '777', isShow: true },
{ value: '子集td1', isShow: true, flage: true },
{ value: '子集td2', isShow: true, flage: true },
{ value: '777', isShow: true },
{ value: '777', isShow: true },
{ value: '777', isShow: true }]
},
{
datas: [
{ value: '777', isShow: true },
{ value: '777', isShow: true },
{ value: '子集td1', isShow: true, flage: true },
{ value: '子集td2', isShow: true, flage: true },
{ value: '777', isShow: true },
{ value: '777', isShow: true },
{ value: '777', isShow: true }]
},]
// 初始化定义两段html
var headerHtml
var bodysHtml
// 渲染函数
function renderHtml() {
$('#myTable thead').empty()
$('#myTable tbody').empty()
headerHtml = $('<tr>')
// 渲染thead
header.forEach((v, i) => {
var tds
if (v.btn) {
tds = `<td><a href='javascript:void(0)' class='extend'>${v.value}</a></td>`
} else {
if (v.isShow) {
tds = `<td>${v.value}</td>`
}
}
headerHtml.append(tds)
})
// 渲染tbody
bodys.forEach((v, i) => {
bodysHtml = $('<tr>')
v.datas.forEach((item, idx) => {
var tds
if (item.isShow) {
tds = `<td>${item.value}</td>`
}
bodysHtml.append(tds)
})
$('#myTable tbody').append(bodysHtml)
})
$('#myTable thead').append(headerHtml)
}
// 执行第一次渲染
renderHtml()
// 展开或者收起按钮点击事件
$('#myTable').on('click', '.extend', function () {
if ($(this).text() === '收起') {
// 改变header数据
header = header.map((v, i) => {
if (v.flage || v.flage === false) {
v.isShow = false
return v
} else if(v.btn){
v.value = '展开'
return v
} else {
return v
}
})
// 改变bodys数据
bodys = bodys.map((v, i) => {
v.datas.map((item, idx) => {
if(item.flage){
item.isShow = false
return item
} else {
return item
}
})
return v
})
} else {
// 改变header数据
header = header.map((v, i) => {
if (v.flage || v.flage === false) {
v.isShow = true
return v
} else if(v.btn){
v.value = '收起'
return v
} else {
return v
}
})
// 改变bodys数据
bodys = bodys.map((v, i) => {
v.datas.map((item, idx) => {
if(item.flage){
item.isShow = true
return item
} else {
return item
}
})
return v
})
}
// 重新渲染
renderHtml()
})
</script>
</body>
</html>以上是关于Table列展开与收起Demo的主要内容，如果未能解决你的问题，请参考以下文章