博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jsPlugin 解决Table中值相同的列进行rowlSpan合并
阅读量:6437 次
发布时间:2019-06-23

本文共 1782 字,大约阅读时间需要 5 分钟。

hot3.png

为了解决这样的需求写的插件

(function($){

    $.fn.mergeCell = function(options) {
        return this.each(function() {
            var cols = options.cols;
            for ( var i = cols.length - 1; cols[i] != undefined; i--) {
              // console.debug(cols[i]);
              mergeCell($(this), cols[i]);
            }
            dispose($(this));
        });
    };
    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);

转载于:https://my.oschina.net/u/2550627/blog/599730

你可能感兴趣的文章
Azure系列2.1.10 —— CloudBlobClient
查看>>
【04-20】httpclient处理302重定向问题
查看>>
OpenGLes2.0 什么是Pbuffer
查看>>
Docker Java+Tomcat 环境搭建
查看>>
uoj#179. 线性规划
查看>>
bzoj 2244 [SDOI2011]拦截导弹(dp+CDQ+树状数组)
查看>>
全局方法
查看>>
DOM 获取、DOM动态创建节点
查看>>
do{...}while(0)的意义和用法
查看>>
【CJOJ】Contest4 - A+B Series
查看>>
Python中四种交换两个变量的值的方法
查看>>
ora-01033:oracle initialization or shutdown in progress 解决方法
查看>>
移动自动化相关名词解释
查看>>
微信开发者工具 快捷键
查看>>
monkey测试===修改adb的默认端口
查看>>
AsyncTask和Handler处理异步消息
查看>>
Scheme 中的 pair 和 list 简述
查看>>
iOS AVAssetExportSession 视频剪切、合并、压缩
查看>>
我收藏的技术知识图(每张都是大图)
查看>>
Spring Boot制作启动图案
查看>>