js动态生成复杂类型表格

描述：根据后台返回数据，使用js动态生成复杂类型的表格。如下图： js动态生成复杂类型表格
上述表格主要实现两点即可，一个是完成后台返回数据的嵌套关系，一个是单元格合并的问题。
html代码：
在生成复杂类型表格的时候最好thead和tbody都单独使用一个table标签。

 <table>
      <thead>
         <tr>
              <th style="width: 30%">渠道名称</th>
               <th style="width: 20%">子渠道</th>
               <th style="width: 20%">子渠道ID</th>
               <th style="width: 30%">操作</th>
          </tr>
       </thead>
</table>
<table class="tdWrap">//此处存放动态生成的tbody
</table>

js代码：

let tbody = '';//每一个主渠道都是一个单独的tbody
  if(data.code === 200){
    console.log(data)
    let d = data.data;
    if(d.length > 0){
      d.map(function (item,index) {
        console.log(item.partnerList)
        tbody +=`<tbody>
          ${item.partnerList.length > 0 ? item.partnerList.map(function (ite,ind) {
          return ` <tr>
                            <td rowspan=${item.partnerList.length} style="width: 30%;" class="hide">
                                <div>${item.name}</div>
                                <button class="btn editBtn" data-toggle="modal" data-target="#modal-channel">编辑
                                </button>
                                <button class="btn newChildBtn" data-toggle="modal" data-target="#modal-childChannel">新增子渠道
                                </button>
                            </td>
                            <td style="width: 20%">${ite.name}</td>
                            <td style="width: 20%">${ite.skinId}</td>
                            <td style="width: 30%">
                              <button class="btn">编辑</button>
                              <button class="btn">查看链接</button>
                              <button class="btn statusBtn" data-id=${ite.id} data-status = ${ite.status}>${ite.status === 1 ? '禁用' : '启用'</button>
                            </td>
                        </tr>`
        }) : ` <tr>
              <td rowspan="2" style="width: 30%;" class="hide">
                  <div>${item.name}</div>
                  <button class="btn editBtn" data-toggle="modal" data-target="#modal-channel">编辑
                  </button>
                  <button class="btn newChildBtn" data-toggle="modal" data-target="#modal-childChannel">新增子渠道
                  </button>
              </td>
              <td style="width: 20%" rowspan="2" colspan="3">暂无</td>                             
          </tr>`}
        </tbody>`
      })
    }else{
      tbody +=`<tbody><tr colspan="4"><td>暂无数据</td></tr></tbody>`
    }
  }else{
    tbody +=`<tbody><tr colspan="4"><td>暂无数据</td></tr></tbody>`
  }
  $('.tdWrap').html(tbody);
  $('.tdWrap').find('tbody').map(function () {
     $(this).find('tr:eq(0) td:eq(0)').removeClass('hide')
  })

由于上述代码每一行tr都会生成一个带按钮的td但是这样生成的表格不是我们想要的，我们只要每个tbody的第一行tr有一个带按钮的td就可以，这样我们只要对其进行列合并就行了，所以我们先把所有带按钮的td添加hide类名让其隐藏，然后生成表格之后把每个tbody的第一行tr带按钮的td显示即可，上面使用三木运算符是因为要把所有不管有无嵌套数据的列表都显示出来。

js动态生成复杂类型表格

相关推荐