基于sorttable.js的表头排序扩展

 

项目开发中需要对表格数据点击表头进行排序，于是采用了开源的sorttable.js 这是一款非常不错的排序工具，集合了许多前辈们的智慧在里面。

一、将sorttable.js引入进来后遇到这样几个问题：

1.sorttable.js只能处理单行表头的排序，而我们的报表大多数是两行表头，直接引入无法进行排序；

2.我们的报表已经有了奇偶行换色的功能，引入sorttable.js后该功能遭到破坏，数据行重新排列，奇偶行颜色混乱；

3.我们的多数报表底部行为总计行，不排序。虽然sorttable.js已经提供了<tfoot>不参与排序功能，但是我们的报表数据都是以集合遍历的形式输出到页面，无<tfoot>。

二、解决办法

1.翻阅源码53行

    if (table.tHead.rows.length != 1) return; // can't cope with two header rows

  当表头为多行时函数return了。

  又78行

    headrow = table.tHead.rows[0].cells;

  取表头第一行为点击排序行。

  在这里我把函数改成取表头最后一行为点击排序行

    //表头有多行时以最后一行为为点击排序行

    headrow = table.tHead.rows[table.tHead.rows.length - 1].cells;

  同时删除53行。

2.报表本身的奇偶行换色是通过在报表页面使用jquery为奇数行添加CSS类实现效果

    $(function(){

      $(".pn-ltbody tr:nth-child(odd)").addClass("altrow");

    });

  所以我的解决的思路是在用户点击表头后、表格排序前把奇数行的CSS类移除，表格排序完成后再给新的奇数行添加CSS类，具体实现如下：

  在源码93行（点击表头事件）

    dean_addEvent(headrow[i],"click", function(e) {

  之后添加语句

    $(".pn-ltbody tr:nth-child(odd)").removeClass("altrow");

  并在105行和118行（表格排序完成）

    return;

  之前添加语句

    $(".pn-ltbody tr:nth-child(odd)").addClass("altrow");

3.源码从59行开始提供了表格最后一行固定不进行排序的实现，但是这个实现的前提是要给最后一行手动添加一个CSS类"sortbottom"。

  然而我们的报表数据从第一行到最后一行都是通过遍历后台传过来的集合动态生成的，因此我的解决办法就是动态的将最后一行标记为不排序行。

    //table的class包含"nofoot"的， 最后一行是总计行，不进行排序。适用于整个表体都是动态循环遍历生成的情况。

    if (table.className.search(/\bnofoot\b/) != -1) {

    if(table.getElementsByTagName('tfoot').length == 0){

    //自己创建<tfoot>把最后一行封装进去

    /*

    tfo = document.createElement('tfoot');

    tfo.appendChild(table.rows[table.rows.length - 1]);

    table.insertBefore(tfo,table.lastChild);

    */

    //给最后一行添上CSS类，转到自带的封装方式

    table.rows[table.rows.length - 1].className='sortbottom';

    }

     }

  一种方法是自己创建<tfoot>把最后一行封装进去，另一种方法是给最后一行添上CSS类，转到自带的封装方式。