$(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 += "" + table_json['head_line'][key_head] + ""; } else if (key_head == "name") { table_head_str += "" + table_json['head_line'][key_head] + ""; } else { table_head_str += "" + table_json['head_line'][key_head] + ""; } } $("#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 = "" + table_arr[i]['id'] + ""; var equ_site_td = "" + table_arr[i]['equ_site'] + ""; var model_td = "" + table_arr[i]['model'] + ""; var equ_type_td = "" + table_arr[i]['equ_type'] + ""; var p_No_td = "" + table_arr[i]['p_No'] + ""; var last_date_td = "" + table_arr[i]['last_date'] + ""; var next_date_td = "" + table_arr[i]['next_date'] + ""; var p_date_td = "" + table_arr[i]['p_date'] + ""; var u_date_td = "" + table_arr[i]['u_date'] + ""; var img_form_td = "" + table_arr[i]['img_form'] + ""; var img_nameplate_td = "" + table_arr[i]['img_nameplate'] + ""; if (table_arr[i]["has_child"] == "yes") { //设备，含子单元 name_td = "" + table_arr[i]['name'] + ""; } else { //设备，不含子单元 name_td = "" + table_arr[i]['name'] + ""; } table_info_str += "" + 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 + ""; } } // 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 = "" + table_arr[i]['name'] + ""; var id_td = "" + table_arr[i]['id'] + ""; var equ_site_td = "" + table_arr[i]['equ_site'] + ""; var model_td = "" + table_arr[i]['model'] + ""; var equ_type_td = "" + table_arr[i]['equ_type'] + ""; var p_No_td = "" + table_arr[i]['p_No'] + ""; var last_date_td = "" + table_arr[i]['last_date'] + ""; var next_date_td = "" + table_arr[i]['next_date'] + ""; var p_date_td = "" + table_arr[i]['p_date'] + ""; var u_date_td = "" + table_arr[i]['u_date'] + ""; var img_form_td = "" + table_arr[i]['img_form'] + ""; var img_nameplate_td = "" + table_arr[i]['img_nameplate'] + ""; child_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 + "" } } return child_tr; }

作品预览「表格固定第一行和头两列（双向滚动条）」