datatable合并单元格

前端的童鞋们都知道一般的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动态合并行的思想。这个方法也是问的度娘。才让我解决了困难。同时也想给大家分享一下知识点。

第一次写文章。有不好的地方。希望大佬们多多指教！