js通过拼接字符串实现一对多行关系表格

什么是一对多行关系的表格呢？超人鸭最近在写一个老项目，是用jsp开发，所以里面的前端代码都是jquery，写到表格，最常用的方式还是拼接字符串去实现，前面说的表格大概是这个样子，我通过demo来演示:

image.png
说白了就是表格的合并行，表格的 td 标签有个 rowspan属性，用来合并行，如果这种结构用html写死是这样的:

  <table border="1">
    <thead></thead>
    <tbody>
      <tr>
        <td rowspan="2">第一层</td>
        <td>第二层1</td>
        <td>数据1</td>
      </tr>
      <tr>
        <td>第二层2</td>
        <td>数据1</td>
      </tr>
    </tbody>
  </table>

总结下规律就是后面有多少行就要写多少个 tr，那个占多行的单元格也就是 td 只写一次，并加上rowspan属性，那如果是用js拼接字符串该如何实现呢?先看看后端给我的数据格式:

 var list = [
  {  // 这个括号代表第一级数据
    name: '第一层',
    count: 2,  // 表示占了多少行
    list: [  // 这个代表第二级数据
      {
        name: '第二层1',
        data: '数据1'
      },
      {
        name: '第二层2',
        data: '数据1'
      }
    ]
  }
]

这是超人鸭真实工作的情景，后端给我的格式就是这样的。
按照上面说的规律，对数据进行处理，并拼接字符串:

var str = ''
for (var i = 0; i < list.length; i++) {
  str += '<tr>'
  str += '<td rowspan=' + list[i].count + '>'  // 处理第一个td，也就是占多行的单元格
  str += list[i].name + '</td>'
  var innerList = list[i].list  // 获取第二层数据
  for(var j = 0; j < innerList.length; j++) {
    if(j > 0) {
      str += '<tr>'
    }
    str += '<td>' + innerList[j].name + '</td>'
    str += '<td>' + innerList[j].data + '</td>'
    str += '</tr>'
  }
}
$('tbody').append(str)  // 添加到dom节点上

emmm...可能代码有点抽象，我再画了张图表示一下:

超人鸭带画家.png

看到我画的两个tr，就是两行，第一行需要从第一个单元格开始，第二行及之后就不需要包块第一个占多行的单元格，所以再看我上面的代码，如果从 j = 1 开始就需要再写tr。
这就是一对多行关系的表格，逻辑思路就是这样子，现在是两层，为一对多，再多一层也就是一对多再对多的关系，也是一样的逻辑，只是复杂一下，下面超人鸭再演示三层的表格，先看demo:

image.png

然后数据格式:

      var list = [
        {
          name: '第一层',
          count: 5,
          list: [
            {
              name: '第二层1',
              count: 3,
              list: [
                {
                  name: '第三层1'
                },
                {
                  name: '第三层2'
                },
                {
                  name: '第三层3'
                }
              ]
            },
            {
              name: '第二层2',
              count: 2,
              list: [
                {
                  name: '第三层4'
                },
                {
                  name: '第四层5'
                }
              ]
            }
          ]
        }
      ]

这次我先画图在放代码:

超人鸭带画家.png

和上面的逻辑一样，每一层的第一次遍历都要带上第一个占多行的单元格，之后的遍历就不用带上那个占多行的单元格，而且要再写tr标签,再看代码:

      for(var i = 0; i < list.length; i++) {
        var innerList = list[i].list  // 获取第二层的数据
        str += '<tr>'
        str += '<td rowspan=' + list[i].count + '>'  // 第一层那个占多行的单元格
        str += list[i].name + '</td>'
        for(var j = 0; j < innerList.length; j++) {
          if(j > 0) {
            str += '<tr>'
          }
          str += '<td rowspan=' + innerList[j].count + '>' + innerList[j].name + '</td>'  // 第二层数据占多行的单元格
          var lastList = innerList[j].list  // 获取第三层数据
          for(var k = 0; k < lastList.length; k++) {
            if(k > 0) {
              str += '<tr>'
            }
            str += '<td>' + lastList[k].name + '</td>'
            str += '</tr>'
          }
        }
      }
      $('#body').append(str)

这就是实现三层数据表格的方式，如果你也遇到同样的需求，就可以参照我的方法去实现，上面说的还是不太明白的话可以复制我的代码去写一下demo，一下子就可以明白的，还有的是如果要实现这种需求，后端给的数据格式也要合理，不是什么格式实现起来都那么顺畅，超人鸭上面的数据格式就是跟后端沟通后他返给我的，当然如果有什么更好的实现方式，十分欢迎请教哦。