项目使用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');
实现效果: