<div style="margin:0 auto">
<p>
<h2>设备基础信息</h2>
</p>
<div class="Tab">
<div class="title"> <a href="#" id="tab1" class="select-y" onclick="Tab('#tab1','#content1')"><span>基础信息</span></a> <a href="#" id="tab2" class="select-n" onclick="Tab('#tab2','#content2')"><span>设备档案</span></a>
</div>
<div class="tabcon">
<ul id="content1">
<div class="table-container">
<table>
<thead>
<tr id='the_head'>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</ul>
<ul id="content2" style="display:none">
<li><a href="#" target="_blank">CSS+Js制作的抽屉式菜单</a></li>
<li><a href="#" target="_blank">4个简洁实用的CSS横向菜单，带搜索框</a></li>
<li><a href="#" target="_blank">OpenCart 开源PHP网店 v1.4.94</a></li>
</ul>
</div>
</div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> <link href="https://lf9-... </head>
<body>
</body>
.Tab .title {
height: 30px;
padding-left: 10px;
background-color: #FFCAC1
}
.Tab .title div {
display: block;
height: 100%
}
.Tab .select-y {
background-color: #FFEBE7;
}
.Tab .select-n {
background-color: #FFFFFF;
}
.Tab .title .select-y,
.Tab .title .select-n {
height: 26px;
line-height: 26px;
display: block;
float: left;
text-align: center;
padding-left: 12px;
margin-top: 4px;
margin-left: 1px;
color: #333;
text-decoration: none;
border-radius: 5px 5px 0 0
}
.Tab .title .select-y span,
.Tab .title .select-n span {
display: block;
padding-right: 12px
}
.tabcon ul {
margin: 5px auto;
padding: 0
}
.tabcon ul li {
height: 24px;
line-height: 24px;
padding-left: 16px;
overflow: hidden;
display: block
}
.table-container {
width: 100%;
/*max-height: 300px;*/
height: 390px;
overflow: scroll;
}
table {
border-collapse: collapse;
/*white-space: nowrap; 文字不换行 */
font-size: 15px;
}
thead tr th {
outline: #fff solid 1px;
/* 设置外轮廓，防止下层表格漏出 */
background-color: #f2f2f2;
text-align: center;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
z-index: 2;
}
.fixed-header.fixed-column {
left: 0;
z-index: 4;
/* 设置最高，确保在其他所有单元格之上 */
}
.fixed-header:not(.fixed-column) {
z-index: 3;
/* 确保在可滚动列之上 */
}
.fixed-column {
border: none;
outline: #fff solid 1px;
background-color: #e9e9e9;
position: -webkit-sticky;
/* Safari */
position: sticky;
left: 0;
z-index: 1;
/* 确保在固定标题下方，但在可滚动单元格上方 */
}
.col-1 {
/* 设置第一列宽度 */
min-width: 80px;
text-align: center;
}
.fixed-column:nth-child(2) {
left: 80px;
/* 根据第一个固定格的宽度进行调整 */
}
tbody td,
thead th {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
/* Adjust the widths as needed 根据需要调整宽度 */
.fixed-column {
width: 100px;
/* 调整固定列的宽度 */
}
/* Optional: Add some spacing between columns for better readability 可选：在列之间添加一些间距以提高可读性 */
th,
td {
white-space: nowrap;
/* 防止文本换行 */
}
$(document).ready(function() {
// 点击后，展示_收缩 子单元
$(this).on("click", ".bi", function() {
// alert("点击了bi");
var table_arr = table_json["baseinfo"];
console.log(table_arr);
var this_id = $(this).parent().prev().text(); // 获取点击行的id（即子单元的pId）。 .parent()获取父节点，.prev()获取上一个兄弟元素
var child_class = "child" + this_id; // 例：child1
var $child = $("." + child_class);
if ($(this).hasClass("bi-caret-right-fill")) { // 可展开
$(this).removeClass("bi-caret-right-fill").addClass("bi-caret-down-fill"); // 变为可收缩
if ($(this).parent().parent().next().hasClass(child_class)) { // 如果存在child_class，直接展示
$child.show();
} else { // 加载子单元数据表格 child_tr
var child_tr = get_son(this_id, child_class);
$(this).parent().parent().after(child_tr);
}
} else if ($(this).hasClass("bi-caret-down-fill")) { // 隐藏子单元
$(this).removeClass("bi-caret-down-fill").addClass("bi-caret-right-fill");
$child.hide();
}
});
// 渲染表格表头
var table_head_str = "";
for (var key_head in table_json["head_line"]) {
if (key_head == "id") {
table_head_str += "<th class='fixed-header fixed-column col-1'>" + table_json['head_line'][key_head] + "</th>";
} else if (key_head == "name") {
table_head_str += "<th class='fixed-header fixed-column'>" + table_json['head_line'][key_head] + "</th>";
} else {
table_head_str += "<th class='fixed-header'>" + table_json['head_line'][key_head] + "</th>";
}
}
$("#the_head").append(table_head_str);
// 渲染表格内容（不加载子单元）
var table_info_str = "";
var table_arr = table_json["baseinfo"];
// console.log(table_arr);
for (var i = 0; i < table_arr.length; i++) {
// console.log(table_json["baseinfo"][i]);
// console.log(id_td);
if (table_arr[i]["pId"] == "0") { // 是设备
var name_td = "";
var id_td = "<td class='fixed-column col-1'>" + table_arr[i]['id'] + "</td>";
var equ_site_td = "<td>" + table_arr[i]['equ_site'] + "</td>";
var model_td = "<td>" + table_arr[i]['model'] + "</td>";
var equ_type_td = "<td>" + table_arr[i]['equ_type'] + "</td>";
var p_No_td = "<td>" + table_arr[i]['p_No'] + "</td>";
var last_date_td = "<td>" + table_arr[i]['last_date'] + "</td>";
var next_date_td = "<td>" + table_arr[i]['next_date'] + "</td>";
var p_date_td = "<td>" + table_arr[i]['p_date'] + "</td>";
var u_date_td = "<td>" + table_arr[i]['u_date'] + "</td>";
var img_form_td = "<td>" + table_arr[i]['img_form'] + "</td>";
var img_nameplate_td = "<td>" + table_arr[i]['img_nameplate'] + "</td>";
if (table_arr[i]["has_child"] == "yes") { //设备，含子单元
name_td = "<td class='fixed-column'><i class='bi bi-caret-right-fill'></i>" + table_arr[i]['name'] + "</td>";
} else { //设备，不含子单元
name_td = "<td class='fixed-column'><i class='bi bi-caret-down'></i>" + table_arr[i]['name'] + "</td>";
}
table_info_str += "<tr>" + id_td + name_td + equ_site_td + model_td + equ_type_td + p_No_td + last_date_td + next_date_td + p_date_td + u_date_td + img_form_td + img_nameplate_td + "</tr>";
}
}
// console.log(table_info_str);
$("table tbody").append(table_info_str);
});
// 设备数据，可用ajax从服务器获取
var table_json = {
"head_line": {
"id": "ID",
"name": "名称",
"equ_site": "所属站点、装置",
"model": "型号",
"equ_type": "类别",
"p_No": "产品编号",
"last_date": "上次检验日期",
"next_date": "下次检验日期",
"p_date": "出厂日期",
"u_date": "投用日期",
"img_form": "整体外观",
"img_nameplate": "铭牌"
},
"baseinfo": [{
"pId": "0",
"has_child": "yes",
"id": "1",
"name": "原料气分离器",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "压力容器",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2024.12.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "0",
"has_child": "no",
"id": "2",
"name": "红页1井生产分离器",
"equ_site": "红页1井站",
"model": "XXXX-XXXX",
"equ_type": "压力容器",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2024.12.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "1",
"has_child": "no",
"id": "3",
"name": "左侧安全阀",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "安全阀",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "1",
"has_child": "no",
"id": "7",
"name": "左侧压力表",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "压力表",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "1",
"has_child": "no",
"id": "8",
"name": "右侧压力表",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "压力表",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "1",
"has_child": "no",
"id": "9",
"name": "入口阀门",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "其他阀",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "1",
"has_child": "no",
"id": "10",
"name": "排污前阀",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "其他阀",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "1",
"has_child": "no",
"id": "11",
"name": "排污后阀",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "其他阀",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "1",
"has_child": "no",
"id": "12",
"name": "左侧安全阀前阀",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "其他阀",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "1",
"has_child": "no",
"id": "13",
"name": "左侧安全阀后阀",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "其他阀",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "5",
"has_child": "no",
"id": "6",
"name": "安全阀",
"equ_site": "红页1井站",
"model": "XXXX-XXXX",
"equ_type": "安全阀",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "0",
"has_child": "yes",
"id": "5",
"name": "红页1井计量分离器",
"equ_site": "红页1井站",
"model": "XXXX-XXXX",
"equ_type": "压力容器",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2024.12.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
},
{
"pId": "1",
"has_child": "no",
"id": "4",
"name": "右侧安全阀",
"equ_site": "30万脱硫装置",
"model": "XXXX-XXXX",
"equ_type": "安全阀",
"p_No": "XXXX-XXXX",
"last_date": "2024.6.30",
"next_date": "2025.6.30",
"p_date": "2000.1.1",
"u_date": "2000.5.30",
"img_form": "/baseinfo/XXXXX.img",
"img_nameplate": "/baseinfo/XXXXX.img"
}
]
};
// 工具栏tab，切换操作
function Tab(tab, content) {
if ($(tab).hasClass("select-n")) {
// alert($(tab).text());
$(tab).removeClass("select-n").addClass("select-y");
$(content).css("display", "block");
$(tab).siblings().removeClass("select-y").addClass("select-n") // .siblings()为获取同级其他元素
$(content).siblings().css("display", "none");
}
}
// 获取子单元数据
function get_son(pId, myclass) {
var table_arr = table_json["baseinfo"];
var child_tr = "";
for (var i = 0; i < table_arr.length; i++) {
if (table_arr[i]["pId"] == pId) { // pId为选中行的id
var name_td = "<td class='fixed-column' style='padding-left: 30px;'><i class='bi bi-x'></i>" + table_arr[i]['name'] + "</td>";
var id_td = "<td class='fixed-column col-1'>" + table_arr[i]['id'] + "</td>";
var equ_site_td = "<td>" + table_arr[i]['equ_site'] + "</td>";
var model_td = "<td>" + table_arr[i]['model'] + "</td>";
var equ_type_td = "<td>" + table_arr[i]['equ_type'] + "</td>";
var p_No_td = "<td>" + table_arr[i]['p_No'] + "</td>";
var last_date_td = "<td>" + table_arr[i]['last_date'] + "</td>";
var next_date_td = "<td>" + table_arr[i]['next_date'] + "</td>";
var p_date_td = "<td>" + table_arr[i]['p_date'] + "</td>";
var u_date_td = "<td>" + table_arr[i]['u_date'] + "</td>";
var img_form_td = "<td>" + table_arr[i]['img_form'] + "</td>";
var img_nameplate_td = "<td>" + table_arr[i]['img_nameplate'] + "</td>";
child_tr += "<tr class='" + myclass + "'>" + id_td + name_td + equ_site_td + model_td + equ_type_td + p_No_td + last_date_td + next_date_td + p_date_td + u_date_td + img_form_td + img_nameplate_td + "</tr>"
}
}
return child_tr;
}