Posted in Javascript onApril 05, 2011
效果如下
原表格:
col0 | col1 | col2 | col3 |
SuZhou | 11111 | 22222 | SuZhouCity |
SuZhou | 33333 | 44444 | SuZhouCity |
SuZhou | 55555 | 66666 | SuZhouCity |
ShangHai | 77777 | 88888 | ShangHaiCity |
ShangHai | uuuuu | hhhhh | ShangHaiCity |
ShangHai | ggggg | ccccc | ShangHaiCity |
GuangZhou | ttttt | eeeee | GuangZhouCity |
GuangZhou | ppppp | qqqqq | GuangZhouCity |
处理之后的样子:
col0 | col1 | col2 | col3 |
SuZhou | 11111 | 22222 | SuZhouCity |
33333 | 44444 | ||
55555 | 66666 | ||
ShangHai | 77777 | 88888 | ShangHaiCity |
uuuuu | hhhhh | ||
ggggg | ccccc | ||
GuangZhou | ttttt | eeeee | GuangZhouCity |
ppppp | qqqqq |
效果出来, 看上去比较简单, 下面先看下页面
<table id="process" cellpadding="2" cellspacing="0" border="1"> <thead> <tr > <td>col0</td> <td>col1</td> <td>col2</td> <td>col3</td> </tr> </thead> <tbody> <tr> <td>SuZhou</td> <td>11111</td> <td>22222</td> <td>SuZhouCity</td> </tr> <tr> <td>SuZhou</td> <td>33333</td> <td>44444</td> <td>SuZhouCity</td> </tr> <tr> <td>SuZhou</td> <td>55555</td> <td>66666</td> <td>SuZhouCity</td> </tr> <tr> <td>ShangHai</td> <td>77777</td> <td>88888</td> <td>ShangHaiCity</td> </tr> <tr> <td>ShangHai</td> <td>uuuuu</td> <td>hhhhh</td> <td>ShangHaiCity</td> </tr> <tr> <td>ShangHai</td> <td>ggggg</td> <td>ccccc</td> <td>ShangHaiCity</td> </tr> <tr> <td>GuangZhou</td> <td>ttttt</td> <td>eeeee</td> <td>GuangZhouCity</td> </tr> <tr> <td>GuangZhou</td> <td>ppppp</td> <td>qqqqq</td> <td>GuangZhouCity</td> </tr> </tbody> </table>
核心代码:
// 这里写成了一个jquery插件的形式 $('#process').mergeCell({ // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始 // 然后根据指定列来处理(合并)相同内容单元格 cols: [0, 3] });
下面看看这个小插件的完整代码:
;(function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.fn.mergeCell = function(options) { return this.each(function() { var cols = options.cols; for ( var i = cols.length - 1; cols[i] != undefined; i--) { // fixbug console调试 // console.debug(cols[i]); mergeCell($(this), cols[i]); } dispose($(this)); }); }; // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法 // 具体可以参考本人前一篇随笔里介绍的那本书 function mergeCell($table, colIndex) { $table.data('col-content', ''); // 存放单元格内容 $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1 $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象 $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan $('tbody tr', $table).each(function(index) { // td:eq中的colIndex即列索引 var $td = $('td:eq(' + colIndex + ')', this); // 取出单元格的当前内容 var currentContent = $td.html(); // 第一次时走此分支 if ($table.data('col-content') == '') { $table.data('col-content', currentContent); $table.data('col-td', $td); } else { // 上一行与当前行内容相同 if ($table.data('col-content') == currentContent) { // 上一行与当前行内容相同则col-rowspan累加, 保存新值 var rowspan = $table.data('col-rowspan') + 1; $table.data('col-rowspan', rowspan); // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响 $td.hide(); // 最后一行的情况比较特殊一点 // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan if (++index == $table.data('trNum')) $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } else { // 上一行与当前行内容不同 // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理 if ($table.data('col-rowspan') != 1) { $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan $table.data('col-td', $td); $table.data('col-content', $td.html()); $table.data('col-rowspan', 1); } } }); } // 同样是个private函数 清理内存之用 function dispose($table) { $table.removeData(); } })(jQuery);
主要的说明在注释里应该都有了, 代码的确比较简单, 像有些地方还值得改进
•处理的table内容是从tbody开始查找的, 如果没有tbody, 那应该给出个更通用化的方案
•for ( var i = cols.length - 1; cols[i] != undefined; i--)...如果表格数据量大, 处理的列也比较多, 这里不进行优化会有造成浏览器线程阻塞的风险, 可以考虑用setTimeout
•其他什么值得改进的, 我想应该会不少的
基于jquery的合并table相同单元格的插件(精简版)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@