前端的童鞋们都知道一般的table合并是很简单的。只要设置它的colspan="数字"或是rowspan=‘数字’即可。
目前在项目中我们用到的是datatable插件。在官网中有一定的例子介绍的是复杂的合并表头。并没有具体的说怎么去动态的合并tbody下的单元格。下面来说下我做的项目中遇到的方法吧。
如图：
然后贴上代码吧。
首先是模拟的数据。
var returnData=[
{id:"item_1",name:"财务管理流程",comp:"支付管理",Pjtime:"2015年-2017年",Tjtime:"2017-10-15",main:"1.获取测试期间内付款申请样本、月度资金计划及合同等支持性文件;2.检查付款申请事项是否在月度资金计划内",mode:"控制测试",choose:"是",proof:"查看",details:"查看",merge:3,imerge:1},
{id:"item_2",name:"财务管理流程",comp:"支付管理",Pjtime:"2015年-2017年",Tjtime:"2017-10-15",main:"检查付款信息是否正确，主要包括：收款单位名称、申请支付金额和支付摘要等；",mode:"控制测试",choose:"否",proof:"查看",details:"查看",merge:0,imerge:2},
{id:"item_3",name:"财务管理流程",comp:"支付管理",Pjtime:"2015年-2017年",Tjtime:"2017-10-15",main:"1.获取测试期间内付款申请样本、月度资金计划及合同等支持性文件;2.检查付款申请事项是否在月度资金计划内",mode:"控制测试",choose:"是",proof:"查看",details:"查看",merge:0,imerge:0},
{id:"item_4",name:"财务管理流程",comp:"支付管理",Pjtime:"2015年-2017年",Tjtime:"2017-10-15",main:"检查付款信息是否正确，主要包括：收款单位名称、申请支付金额和支付摘要等；",mode:"控制测试",choose:"是",proof:"查看",details:"查看",merge:3,imerge:1},
{id:"item_5",name:"财务管理流程",comp:"支付管理",Pjtime:"2015年-2017年",Tjtime:"2017-10-15",main:"检查付款信息是否正确，主要包括：收款单位名称、申请支付金额和支付摘要等；",mode:"控制测试",choose:"是",proof:"查看",details:"查看",merge:0,imerge:2},
{id:"item_6",name:"财务管理流程",comp:"支付管理",Pjtime:"2015年-2017年",Tjtime:"2017-10-15",main:"检查付款信息是否正确，主要包括：收款单位名称、申请支付金额和支付摘要等；",mode:"控制测试",choose:"是",proof:"查看",details:"查看",merge:0,imerge:0}
];$('#lx_namePj_table').dataTable( data: returnData, //模拟的数据
sDom: '"top"i',
pageLength: 6,//每页显示的条数
autoWidth: false,
destroy: true,
info: true,
scrollX:true, //横向滚动条
columns: [
{"data": null, title: "序号", "width": "8%"},
{"data": "id", visible:false},
{"data": "name", title: "一级流程", "width": "15%"},
{"data": "comp", title: "末级流程", "width": "15%"},
{"data": "Pjtime",title: "控制点编号", "width": "15%"},
{"data": "Tjtime",title: "控制点描述", "width": "15%"},
{"data": "main",title: "评价要点", "width": "40%"},
{"data": "mode",title: "测试方式", "width": "15%"},
{"data": "choose",title: "是否存在缺陷", "width": "15%"},
{"data": "proof",title: "佐证", "width": "15%"},
{"data": "details",title: "缺陷详情", "width": "15%"}
],
"fnDrawCallback": function () {
this.api().column(0).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
},
"columnDefs": [{ //重要的部分
targets: [2,3], //要合并的列数（第1，2，3列）
createdCell: function (td, cellData, rowData, row, col) { //重要的操作可以合并列的代码
var rowspan = rowData.merge;//这里主要是利用了模拟数据中的merge来控制
if (rowspan > 1) { //这里做的判断。相信大家也能看懂的。
$(td).attr('rowspan', rowspan)
}
if (rowspan == 0) {
$(td).remove();
}
},
"data": "culture_title",
"render": function (data, type, full) {
return "<span title='" + data + "'>" + data + "</span>";
}
},{
targets: [7,8,9,10], //第1，2，3列 //这块是另外一模块的合并。所以是写成了对象的形式。
createdCell: function (td, cellData, rowData, row, col) { //和上面一样的思想
var rowspan = rowData.imerge;
if (rowspan > 1) {
$(td).attr('rowspan', rowspan)
}
if (rowspan == 0) {
$(td).remove();
}
}
}]
});
最后来说下数据中的merge和imerge代表的意思
merge是第一次要合并的数据值 3.是代表的要合并的行数、如果要合并的话。就在具体的行数上写合并的行数。例如：3.不合并的写1.但在合并的行后边要写上0.也就是不合并的意思。
imerge也是这样的思想。
好了。总结了一下datatable动态合并行的思想。这个方法也是问的度娘。才让我解决了困难。同时也想给大家分享一下知识点。
第一次写文章。有不好的地方。希望大佬们多多指教！