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


浙公网安备 33010602011771号