浏览代码

added footer option

Yoni Jah 10 年之前
父节点
当前提交
de8ea7581a
共有 2 个文件被更改,包括 86 次插入0 次删除
  1. 1 0
      src/bootstrap-table.css
  2. 85 0
      src/bootstrap-table.js

+ 1 - 0
src/bootstrap-table.css

@@ -14,6 +14,7 @@
     -moz-border-radius: 4px;
 }
 
+.fixed-table-footer,
 .fixed-table-header {
     height: 37px; /*cellHeight*/
     border-bottom: 1px solid #dddddd;

+ 85 - 0
src/bootstrap-table.js

@@ -121,6 +121,7 @@
         this.$el = $(el);
         this.$el_ = this.$el.clone();
         this.timeoutId_ = 0;
+        this.timeoutFooter_ = 0;
 
         this.init();
     };
@@ -153,6 +154,7 @@
         searchAlign: 'right',
         selectItemName: 'btSelectItem',
         showHeader: true,
+        showFooter: false,
         showColumns: false,
         showPaginationSwitch: false,
         showRefresh: false,
@@ -245,6 +247,7 @@
         'class': undefined,
         align: undefined, // left, right, center
         halign: undefined, // left, right, center
+        falign: undefined, // left, right, center
         valign: undefined, // top, middle, bottom
         width: undefined,
         sortable: false,
@@ -253,6 +256,7 @@
         switchable: true,
         clickToSelect: true,
         formatter: undefined,
+        footerFormatter: undefined,
         events: undefined,
         sorter: undefined,
         cellStyle: undefined,
@@ -282,6 +286,7 @@
         this.initTable();
         this.initHeader();
         this.initData();
+        this.initFooter();
         this.initToolbar();
         this.initPagination();
         this.initBody();
@@ -299,6 +304,7 @@
                             this.options.formatLoadingMessage(),
                         '</div>',
                     '</div>',
+                    '<div class="fixed-table-footer"><table><tr></tr></table></div>',
                     '<div class="fixed-table-pagination"></div>',
                 '</div>',
             '</div>'].join(''));
@@ -470,6 +476,80 @@
             });
     };
 
+    BootstrapTable.prototype.initFooter = function () {
+        this.$footer =  this.$container.find('.fixed-table-footer');
+        if (!this.options.showFooter || this.options.cardView) {
+            this.$footer.hide();
+        } else {
+            this.$footer.show();
+        }
+    };
+
+    BootstrapTable.prototype.resetFooter = function () {
+        var bt   = this,
+            data = bt.getData(),
+            html = [];
+
+        if (!this.options.showFooter || this.options.cardView) { //do nothing
+            return;
+        }
+
+        $.each(bt.options.columns, function (i, column) {
+            var falign = '', // footer align style
+                style  = '',
+                class_ = sprintf(' class="%s"', column['class']);
+
+            if (!column.visible) {
+                return;
+            }
+
+            falign = sprintf('text-align: %s; ', column.falign ? column.falign : column.align);
+            style = sprintf('vertical-align: %s; ', column.valign);
+
+            html.push('<td', class_, sprintf(' style="%s"', falign + style), '>');
+            html.push(
+                typeof column.footerFormatter === 'function' ?
+                    column.footerFormatter(data) || '&nbsp;' :
+                    '&nbsp;'
+            );
+            html.push('</td>');
+        });
+
+        bt.$footer.find('tr').html(html.join(''));
+        clearTimeout(bt.timeoutFooter_);
+        bt.timeoutFooter_ = setTimeout($.proxy(bt.fitFooter, bt), bt.$el.is(':hidden') ? 100: 0);
+        return;
+    };
+
+    BootstrapTable.prototype.fitFooter = function () {
+        var bt = this,
+            $fixedBody,
+            $footerTd,
+            elWidth,
+            scrollWidth;
+        clearTimeout(bt.timeoutFooter_);
+        if (bt.$el.is(':hidden')) {
+            bt.timeoutFooter_ = setTimeout($.proxy(bt.fitFooter, bt), 100);
+            return;
+        }
+
+        $fixedBody  = bt.$container.find('.fixed-table-body');
+        elWidth     = bt.$el.css('width');
+        scrollWidth = elWidth > $fixedBody.width() ? getScrollBarWidth() : 0;
+
+        bt.$footer.css({
+            'margin-right': scrollWidth
+        }).find('table').css('width', elWidth)
+            .attr('class', bt.$el.attr('class'));
+
+        $footerTd = bt.$footer.find('td');
+
+        $fixedBody.find('tbody tr:first-child:not(.no-records-found) > td').each(function(i) {
+            $footerTd.eq(i).outerWidth($(this).outerWidth());
+        });
+    };
+
+
     /**
      * @param data
      * @param type: append / prepend
@@ -1401,6 +1481,11 @@
             padding += cellHeight;
         }
 
+        if (this.options.showFooter) {
+            this.resetFooter();
+            padding += cellHeight;
+        }
+
         $tableContainer.css('padding-bottom', padding + 'px');
     };