文档章节

jsPlugin 解决Table中值相同的列进行rowlSpan合并

AntMoon
 AntMoon
发布于 2016/01/08 15:40
字数 496
阅读 7
收藏 0


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

(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);

© 著作权归作者所有

AntMoon
粉丝 0
博文 19
码字总数 4923
作品 0
津南
私信 提问
[转]Oracle表连接方式学习

出自:http://www.itpub.net/thread-207865-1-1.html 一般常见的Oracle数据库连接有3种: Nested Loop,Merge,Hash Join 1.嵌套循环联接NL(Neeted Loop) 嵌套循环联接也称为嵌套迭代,它将一...

吐槽的达达仔
2014/12/05
41
0
jquery单元格合并

第一次遇到页面单元格要在页面加载完成后,做单元格合并的功能,记录一下。 <script type="text/javascript"> (function($) { $.fn.mergeCell = function(options) { return this.each(funct......

BenyChang
2015/12/02
73
0
令仔学MySql系列(一)----explain详解

explain显示了MySQL如何使用索引来处理select语句以及连接表。可以帮助选择更好的索引和写出更优化的查询语句。下面是一个例子: 然后咱们来说一说表格中每一列的具体含义。 SELECT识别符。这...

令仔很忙
2017/03/07
0
0
悲剧啊!Mysql的上古BUG!!!

问题的本质在于InnoDB初始化AUTO_INCREMENT的方式,在每次重启时,总是算出表上最大的自增值作为最大值,下一次分配从该值开始。这意味着如果在btree右侧叶节点大量删除记录,重启后,自增值...

linuxprobe
2016/10/10
33
0
简单地整理一下explain的知识

输出的一些相关信息,只有了解这些相关信息究竟是要做什么,才能通过执行计划更加准确的明白如何去优化一个select ; id : 标识,查询序列号; select_type : select的类型; SIMPLE 简单SELEC...

世界和平维护者
2016/09/30
17
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot系列:Spring Boot集成Spring Cache

一、关于Spring Cache 缓存在现在的应用中越来越重要, Spring从3.1开始定义了org.springframework.cache.Cache和org.springframework.cache.CacheManager接口来统一不同的缓存技术,并支持使...

杨小格子
45分钟前
8
0
二、MySql存储引擎简介(笔记)

MySql体系 先来看一下MySql的架构图: MySql的存储引擎在架构的最下层,提供了各式各样的存储特性,下面介绍几个常用的存储引擎。 MyISAM 官方提供的一个存储引擎,在数据库的系统表和系统生...

XuePeng77
昨天
4
0
聊聊nacos config的deleteConfig

序 本文主要研究一下nacos config的deleteConfig ConfigController nacos-1.1.3/config/src/main/java/com/alibaba/nacos/config/server/controller/ConfigController.java @Controller@Re......

go4it
昨天
7
0
面试:原来Redis的五种数据类型底层结构是这样的

关注我,可以获取最新知识、经典面试题以及微服务技术分享   在Redis中会涉及很多数据结构,比如SDS,双向链表、字典、压缩列表、整数集合等等。Redis会基于这些数据结构自定义一个对象系统...

ccww_
昨天
9
0
java发送html模板的高逼格邮件

最近做了一个监测k8s服务pod水平伸缩发送邮件的功能(当pod的cpu/内存达到指定阈值后会水平扩展出多个pod、或者指定时间内pod数应扩展到指定数量),一开始写了个格式很low的邮件,像下面这样...

码农实战
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部