前端的童鞋們都知道一般的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動態合並行的思想。這個方法也是問的度娘。才讓我解決了困難。同時也想給大家分享一下知識點。
第一次寫文章。有不好的地方。希望大佬們多多指教！