自定义表格（包含表头固定，冻结列，行数据合并）

今天分享一个自定义的表格，最近使用bootstrap-table的表格，发现很多问题，在网上找也找不到最好的解决办法，偏偏测试提的很多BUG都和bootstrap-table的展示有关，我真的会谢，谁懂看bootstrap-table源码的痛苦啊...

分享之前先帮孩子解决解决问题吧：

（都是bootstrap-table的，知道的可以提供下解决办法或者思路）

1.使用固定表头，拖动表格会出现错乱对不齐的问题（偶尔会出现滚动条出现在表格内部）

2.表格有二级表头时，打开列拖动功能，拖动列之后整个表格就乱了，以至于现在都不能把这两个功能一起用

3.刷新表格的时候表格td每次的长短都不一样（相同数据情况下，多次点击查询，宽度一直变一直变...）

4.带子表的表格，当点击子表+号打开子表的时候，父表内容和表头对不齐（最后解决办法我是直接给重刷拉长）

行内编辑 x-edit和tooltip都被测试各种吐槽，这些功能的兼容性感觉真的不行...但是单独使用都还可以，都怀疑自己是不是少引入了啥关键的js，有知道的大佬知会我一声。

拜谢

拜谢

好了吐槽完进入正文，虽然感觉bootstrap-table有很多小毛病，但是用起来也确实很方便，具体大家可以去bootstrap官网上去看哈，这里就不赘述了，但是它提供的很多方法都很实用，功能还是很完善的。

终于在一个外包项目中，要自己开发一个表格，这个表格也就应运而生啦（思路提供给大家，考虑到td里面有些操作和展示定制化比较多，我在代码里就删除了，大家可以自己添加和再封装）

思路：获取表格数据->根据列和配置判断是否合并活冻结->渲染生成->设置css固定表头或冻结列

项目是一个学校课程表格

先上图

 

创建表头：（这里进行了表头的合并）

var thead = $('<thead></thead>')
                var headTR = $('<tr class="schoolClassInfo_table_head"/>');
                var headDateTD = $('<td class="topDiv" colspan="2" style="min-width: 150px;width:150px;">日期</td>');
                headTR.append(headDateTD);
//请求后插入表头列及数据

数据插入和渲染就不写了，应该都OK，主要就是一个冻结列和固定表头

固定表头及冻结列：（表格结构暂时就清空啦）

<div class="schoolClassInfo_tablePanl">
     <table class="schoolClassInfo_table" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr class="schoolClassInfo_table_head">
                <td class="topDiv"></td><td></td><td></td><td></td><td></td>
            </tr>
        </thead>
        <tr>
            <td class="noonClass"></td><td></td><td></td><td></td>
        </tr>
      </table>
 </div>

//固定工表头
.schoolClassInfo_table thead {
        border-left: 1px solid #DFE2EB;
        border-top: 1px solid #DFE2EB;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        display: table;
        table-layout: fixed;
        z-index: 19;
    }

//冻结列
 .noonClass{
        position: sticky; /* 首列使用粘性属性，固定到原位置 */
        position: -webkit-sticky;
        left: -1px; /* 使用sticky时需要配置定位标识 */
        background-color: #fea26a;
        color: #fff;
        z-index: 10; /* 在滑动时，后面的内容会覆盖掉前首列单元，需要设置z级别 */
    }
//处理冻结列和表头固定导致第一个表头td滑动问题
.topDiv{
        position: sticky; /* 首列使用粘性属性，固定到原位置 */
        position: -webkit-sticky;
        left: -1px; /* 使用sticky时需要配置定位标识 */
        top: 0px;
        background-color: #fea26a;
        color: #fff;
        border: 1px solid;
        z-index: 19; /* 在滑动时，后面的内容会覆盖掉前首列单元，需要设置z级别 */
    }

代码大致如上，数据清了自己拉出来的，没跑过，见谅。

附带一句：冻结列固定表头同时使用时，给冻结列设置一下颜色（不然全文字滑动时会堆叠）