项目使用jQuery,拼接字符串的方式,通过后端数据,实现表格的列的动态实现

代码:

    $.get("接口地址" + code,function(res){
      var res = res.ResData;
      var list = []
      for (var i = 0; i < res.length; i++) {
        if (res[i].M_JJGK_XSFY_MX.length > 0) {
          var obj = { // 这个括号代表第一级数据
            name: res[i].FYLX, //第一层
            count: res[i].M_JJGK_XSFY_MX.length, // 表示占了多少行
            list: res[i].M_JJGK_XSFY_MX // 这个代表第二级数据
          }
          list.push(obj)
        }
      }

      var jjxs = '';
      for (var i = 0; i < list.length; i++) {
        var rt = /(.+)?(?:\(|()(.+)(?=\)|))/.exec(list[i].name);
        jjxs += '<tr>'
        jjxs += '<td rowspan=' + list[i].count + '>' // 处理第一个td,也就是占多行的单元格
        jjxs += rt[1] + '<br>( '+rt[2]+' )</td>' //这边是为了切割括号里的值,为了换行
        var innerList = list[i].list // 获取第二层数据
        for (var j = 0; j < innerList.length; j++) {
          if (j > 0) {
            jjxs += '<tr>'
          }
          jjxs += '<td>' + innerList[j].F004 + '</td>'
          jjxs += '<td>' + innerList[j].F006 + '</td>'
          jjxs += '<td>' + innerList[j].REMARK + '</td>'
          jjxs += '</tr>'
        }
      }
      $("#table tbody").html(jjxs)
    },'jsonp');

实现效果:

posted @ 2020-09-17 13:59  全村最靓的程序猿  阅读(485)  评论(0编辑  收藏  举报