jsPlugin 解決Table中值相同的列進行rowlSpan合併


爲了解決這樣的需求寫的插件 html

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

相關文章
相關標籤/搜索