[实战之Datatable] 表头跨栏及表身多列(搭配jQuery)

最近看到一个有趣的需求(需支援ie11)
希望能在datatable套件下，可以做到表头(thead)跨栏
以及表身(tbody)可以有多列一行的展示(如下图)

那先来看表头的部份，基本上这边不难
只要把thead做好后，在columnDefs对好栏位的数量即可
但注意要加好宽度(个人非常建议)
这样datatable套件就会自动帮你排好好的
但如果开了scrollX, autoWith之后，又是另一个故事了

拉回来，表头解决完之后
虽然datatable套件有提供多列或栏位折叠的机制
但对于user操作来说较不直观所以希望比照传统方式做跨列(rowspan)
所以思路是这样：先用ul&li做出列的资料，调整css样式，然后再来同步每个ul下的高度(如上图的第二项)

首先，用ul&li做出列的资料
这边就直接在datatable的render做字串组合就不多述
但记得给后面会用到的className: colMultiLine

再来，调整css样式部份，其中为了ie，把first-child独立出来处理

    .colMultiLine {        padding: 10px 0px 0px 0px !important;        vertical-align: top !important;    }    .colMultiLine ul {        margin: 0px;        padding: 0px;    }    .colMultiLine ul li{        border-bottom: 1px solid #e5e5ca;        min-height: 25px;        line-height: 20px;    }    .colMultiLine ul li:first-child {        border-top: 0px !important;    }

到这边，多列的基础已经达成，剩下li的高度不一的问题

所以jQuery这时就上场，下例选的是用datatable的initComplete事件绑定
但还是要依个自需求决定用那个事件

    initComplete: function () {        $('.datatable tbody tr').each(function () {            var cnt = $(this).find('td ul:eq(0) li').length;            if (cnt > 0) {                for (var i = 1; i <= cnt; i++) {                    var maxHeight = Math.max.apply(null, $(this).find('td ul li:nth-child(' + i + ')').map(function () {                        return $(this).height();                    }).get());                    $(this).find('td ul li:nth-child(' + i + ')').height(maxHeight);                }            }        });    }

最后到这，大致的需求已经成形
剩下一些细节优化的环节
比如 li里有padding或margin的话，计算时要列入考虑
比如 资料列数过多(通常是未分页状况下)时，会有效能上的考量
比如 浏览器resize时的相对处理做法

以上做个笔记