最近在老项目里面添加一些页面,项目太老只能在原有的项目基础和插件上添加代码

html

//表格        
<table id="dataTable"><thead><tr><th>序号</th><th>名称</th><th></th></tr></thead><tbody></tbody>
</table>
<div id="pagination"></div>//layui分页

js

<script>function toggleChildRow(rowId) {console.log(rowId,'rowId')var childRow = document.querySelector('.child-row[data-parent-id="'+rowId+'"]');var btn = document.querySelector('.toggle-btn[data-row="'+rowId+'"]');if(childRow.style.display === 'none') {childRow.style.display = 'table-row';btn.textContent = '▶';//展开} else {childRow.style.display = 'none';btn.textContent = '▼';//折叠}}function viewChildRow(row){//查看操作vue.rptCoProfileAccountList = []vue.rptCoProfileAccountList.push(row)vue.tlttt = '查看'}var vue = new Vue({//使用vueel: '#vue',data: {},computed: {},created(){this.getlist()//列表接口},methods: {getlist:function (){layui.table.render({elem: '#pagination'//分页id, url:'/api/rptCoProAccount/list', totalRow: true,id:'idTest', cols: [], page: true,done: function(res, curr, count) {vue.getsylist(res.data)//数据进行渲染}});},getsylist:function(mockData){//数据渲染到页面var tbody = document.querySelector('#dataTable tbody');tbody.innerHTML = '';mockData.forEach((item,index) => {//数据循环var parentRow = document.createElement('tr');parentRow.className = 'parent-row';parentRow.dataset.id = item.orgId;var toggleCell = document.createElement('td');toggleCell.innerHTML = '<button class="toggle-btn" data-                          row="'+item.orgId+'" onclick="toggleChildRow(\''+item.orgId+'\')">▼</button>';//展开按钮var idCell = document.createElement('td');idCell.textContent = index + 1;//序号var nameCell = document.createElement('td');nameCell.textContent = item.orgName;//名称parentRow.append(idCell, nameCell, toggleCell);tbody.appendChild(parentRow);//子数据if(item.children && item.children.length > 0) {var childRow = document.createElement('tr');childRow.className = 'child-row';childRow.dataset.parentId = item.orgId;childRow.style.display = 'none';var containerCell = document.createElement('td');containerCell.colSpan = 4;var childTable = document.createElement('table');childTable.className = 'child-table';var thead = document.createElement('thead');thead.innerHTML = '<tr><th>名称</th><th>开户行</th><th>开户行账号</th><th>操作</th></tr>';var childTbody = document.createElement('tbody');item.children.forEach(function(child) {var row = document.createElement('tr');row.innerHTML = '' +'<td>' + child.accountName + '</td>' +'<td>' + child.openingBank + '</td>'+'<td>' + child.accountNum + '</td>'+'<td> <a class="layui-btn layui-btn-xs" onclick="viewChildRow('+JSON.stringify(child).replace(/"/g, '&quot;')+')" lay-event="resetPwd">\n' +'                <img src="../../../../assets/img/look.png" alt=""/>\n' +'                <span>查看</span>\n' +'            </a>\n' +'            <a class="layui-btn layui-btn-xs" onclick="editChildRow('+JSON.stringify(child).replace(/"/g, '&quot;')+')" lay-event="edit">\n' +'                <img src="../../../../assets/img/edit.png" alt=""/>\n' +'                <span>修改</span>\n' +'            </a>\n' +'            <a class="layui-btn layui-btn-xs" onclick="scChildRow('+JSON.stringify(child).replace(/"/g, '&quot;')+')" lay-event="del">\n' +'                <img src="../../../../assets/img/delete.png" alt="">\n' +'                <span>删除</span>\n' +'            </a></td>';childTbody.appendChild(row);});childTable.append(thead, childTbody);containerCell.appendChild(childTable);childRow.appendChild(containerCell);tbody.appendChild(childRow);}});},}})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/85181.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/85181.shtml
英文地址,请注明出处:http://en.pswp.cn/pingmian/85181.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Houdini 节点使用方法

Houdini 的节点系统是其程序化建模和特效制作的核心功能之一&#xff0c;通过节点网络实现程序化建模、特效制作、动力学模拟等复杂任务。掌握节点使用方法是高效创作的关键&#xff0c;以下是围绕用户需求的 全面、深入且结构化 的节点使用指南 一、节点基础操作 1. 创建与连…

license授权文件说明

license管理 1.使用场景 系统将自动检测license信息是否过期 - license过去前一个月&#xff0c;会显示warning&#xff1a;license file will expire in 30 days - 当license过去&#xff0c;会显示license file expired#注意 1. 数据库重启时才会启动 License 授权期限校验…

C++11中alignof和alignas的入门到精通指南

文章目录 一、引言二、内存对齐的概念和作用2.1 什么是内存对齐2.2 内存对齐的优势 三、alignof运算符3.1 定义和作用3.2 语法规则3.3 使用示例3.4 注意事项 四、alignas说明符4.1 定义和作用4.2 语法规则4.3 使用示例4.4 注意事项 五、alignof和alignas的结合使用六、实际应用…

防爆+高性能!ABB 防爆伺服电机HY系列守护安全生产

在石油、化工、火工等高风险行业中&#xff0c;如何在易燃易爆环境中确保设备安全稳定运行&#xff0c;同时兼顾高性能&#xff1f;ABB防爆伺服电机HY系列给出了完美答案&#xff01; 专为爆炸性环境设计&#xff0c;安全与性能兼得 ABB HY系列基于先进的HDS伺服平台打造&…

洪千武—华为海外HRBP

我的个人介绍 辰熙咨询创始人&CEO 2005年入职华为人力资源管理部 华为海外首批HRBP推动者、华为TUP股权激励实战顾问 华为IBM项目组成员、华为海外代表处AT成员 著有《OKR管理法则》、《力出一孔》 2005年以HR英文专才&#xff0c;从香港著名咨询公司被猎聘到华为人力…

测试:网络协议超级详解

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 </

游戏技能编辑器界面优化设计

界面布局重构 详细界面布局 ---------------------------------------------------------- | 顶部工具栏 [保存] [加载] [撤销] [重做] [测试] [设置] | --------------------------------------------------------- | 资源管理 | | 属性编…

【java中使用stream处理list数据提取其中的某个字段,并由List<String>转为List<Long>】

你当前的代码是这样的&#xff1a; List<String> gongkuangIds gongkuangBoundList.stream().filter(obj -> obj.getBoundValue() ! null).map(PlanSchemeProductionBoundInfo::getBoundValue).distinct().collect(Collectors.toList());这段代码从 gongkuangBoundL…

《前端面试题:JS数组去重》

JavaScript数组去重终极指南&#xff1a;从基础到高级的多种方法&#xff08;附面试题解析&#xff09; 在前端开发中&#xff0c;数组去重是JavaScript中最常见的需求之一。本文将全面解析8种数组去重方法&#xff0c;包括基础实现、ES6新特性、性能优化等&#xff0c;并附上…

基于51单片机的智能小车:按键调速、障碍跟踪、红外循迹与数码管显示(一个合格的单片机课设)

引言 在嵌入式系统领域&#xff0c;51单片机因其简单易用、成本低廉的特点&#xff0c;一直是入门学习的理想平台。今天我将分享一个基于51单片机的多功能智能小车项目&#xff0c;它集成了按键PWM调速、障碍物跟踪、红外循迹和数码管显示四大功能。这个项目不仅涵盖了嵌入式开…

Java异常处理(try-catch-finally):像医生一样处理程序的“感冒”

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、从一个真实问题开始&#xff1a;为什么需要异常处理&#xff1f; 假设你正在开发一个文件读取工具&#xff0c;用户输入文件名后&#xff0c;程序会读…

PostgreSQL 数据库故障与性能高效实时监测技术深度解析

关键词&#xff1a; postgresql 故障与性能监控 &#x1f4d1; 文章目录 1. 引言与监控重要性 2. PostgreSQL监控体系架构 3. 故障监控核心技术 4. 性能监控关键指标 5. 实时监测技术实现 6. 监控工具选型与部署 7. 故障预警与自动化响应 8. 性能调优监控策略 9. 最佳…

logrotate 踩坑

我的logrotate配置&#xff0c;原本运行正常&#xff0c;最近几天发现轮转失败&#xff0c;两个目录下的日志全部无法轮转&#xff0c;于是开始排查问题 /data01/logs/test1/*.log /data01/logs/test2/*.log {missingokrotate 1notifemptycreate 0644 www-data admsharedscrip…

FastGPT、百度智能体、Coze与MaxKB四大智能体平台在政务场景下的深度对比

在生成式AI技术快速迭代的浪潮中&#xff0c;百度智能体平台、Coze、FastGPT和MaxKB作为四大智能体开发平台&#xff0c;凭借差异化的技术路径和功能特性&#xff0c;正在重塑政务AI应用的开发范式。本文从功能实现、政务场景适应性等维度展开深度解析&#xff0c;为开发者提供…

基于SpringBoot的美食分享平台-038

一、项目技术栈 Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SpringBoot 前端&#xff1a;采用HTML和Vue相结合开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 …

【C++第三方包安装】Windows与Linux安装配置redis-plus-plus指南

前言 下面主要是对于两种环境安装、配置、使用C的第三方包&#xff08;redis&#xff09;&#xff0c;对于其他的第三方库&#xff0c;也可以使用类似的方法进行类比安装。 且大多数的第三方库都可以利用工具一键安装或手动编译安装。 Windows 要在Windows系统上快速安装和使…

springboot入门之路(二)

系列文章目录 springboot入门之路&#xff08;一&#xff09;连续的学习渐进之路。阅读点击&#xff1a;springboot入门之路(一) 文章目录 系列文章目录3.springboot配置及注意事项3.1继承starter parent3.2使用没有父POM的Spring Boot3.3配置java的编译的版本3.4使用"de…

【开源解析】基于Python+Qt打造智能应用时长统计工具 - 你的数字生活分析师

&#x1f4ca; 【开源解析】基于PythonQt打造智能应用时长统计工具 - 你的数字生活分析师 &#x1f308; 个人主页&#xff1a;创客白泽 - CSDN博客 &#x1f525; 系列专栏&#xff1a;&#x1f40d;《Python开源项目实战》 &#x1f4a1; 热爱不止于代码&#xff0c;热情源自…

PHP语法基础篇(三):类型转换与常量

"在完成PHP输出函数和字符串操作的学习后&#xff0c;本篇笔记将记录 类型转换和 常量应用的学习过程。作为语法基础篇的第三部分&#xff0c;将重点关注&#xff1a; 类型转换数学函数常量定义&#xff1a;define() 与const 的使用差异魔术常量应用&#xff1a;__LINE__ …

Linux lsof 命令详解+实例

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;CSDN博客专家   &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01…