最近在老項目里面添加一些頁面,項目太老只能在原有的項目基礎和插件上添加代碼
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, '"')+')" 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, '"')+')" 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, '"')+')" 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>