backgridjs中的总和页脚

Question

我在下面有一个 backgridjs 表。

var columns = [{
    name: "_id",
    label: "account#",
    editable:"false",
    cell: "string"
  }, {
    name: "class",
    label: "class",
    editable:"false",
    cell: "string"
  },{
    name: "date",
    label: "Date",
    editable:"false",
    cell: "string"
  },{
    name: "id",
    label: "id",
    editable:"false",
    cell: "string"
  },{
    name: "total",
    label: "Total",
    editable:"false",
    cell: Backgrid.NumberCell.extend({
      orderSeparator: ','
    }),
    cell: "number"
  }];

var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
  url: "/payroll",
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});

var pageableTerritories = new PageableTerritories();

var CaptionFooter = Backgrid.Footer.extend({
  render: function () {
    this.el.innerHTML = '<tr><td></td><td></td></tr>'
    return this;
  }
});

// Set up a grid to use the pageable collection
var pageableGrid = new Backgrid.Grid({
  columns: [{
    // enable the select-all extension
    name: "",
    cell: "select-row",
    headerCell: "select-all",
  }].concat(columns),
  collection: pageableTerritories,
  footer: CaptionFooter // <--
});

// Render the grid
var $example1 = $("#example-1-result");
$example1.append(pageableGrid.render().el)

// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
  collection: pageableTerritories
});

// Render the paginator
$example1.after(paginator.render().el);

// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
var filter = new Backgrid.Extension.ClientSideFilter({
  collection: pageableTerritories,
  fields: ['_id',"Order Class","techId"],
  placeholder: "search"
});

// Render the filter
$example1.before(filter.render().el);

// Add some space to the filter and move it to the right
$(filter.el).css({float: "right", margin: "20px"});

// Fetch some data
pageableTerritories.fetch({reset: true});

一切正常，如预期的那样，除了我很难弄清楚如何为总列设置总页脚单元格。

如果我在控制台中键入下面的命令，我会得到我想要的页脚单元格。

for (var i = 0,total = 0, len = pageableTerritories.toJSON().length; i < len; ++i) {
  total = total + pageableTerritories.toJSON()[i].total;
  $('tfoot').text(total)
};

但我希望在表格呈现时显示页脚单元格。我尝试了以下但总显示 $0。

var CaptionFooter = Backgrid.Footer.extend({

  render: function () {
   for (var i = 0,total = 0, len = pageableTerritories.toJSON().length; i < len; ++i) {
      total = total + pageableTerritories.toJSON()[i].total;
      $('tfoot').text(total)
    };
    this.el.innerHTML = '<tr><td></td><td></td></tr>' + total <---- $0 here
    return this;
  }

});

如果有人能帮我解决这个问题，我将不胜感激。像往常一样提前感谢。

Answer 1

这解决了我的页脚总数问题，但是当我对页脚总数进行分页时，页脚总数不会更新。

var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
  url: "/payroll",
  total: function() {
      return this.reduce(function(memo, value) {
        return memo + value.get("total");
      }, 0);
    },
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});

var CaptionFooter = Backgrid.Footer.extend({
    initialize: function() {
      _.bindAll(this);
      this.collection.bind('sync', this.total);
    },
    total: function(evt) {
      var total = evt.total()
      this.$el.html("<tr><td colspan='7' class='text book bold align right'>Gross Pay: $" + total + "</td></tr>");
    }
  });

Answer 2

看看这个 Backgridjs 页脚周围的简单包装器，以提供总计页脚。

https://bitbucket.org/base79/backgridjs-total-footer/overview

对于您的示例，更新列以包括：

var columns = [{
    ...
    {
        name: 'total',
        label: 'Total',
        ...
        footerCell: TotalFooter.Cell.extend({
            getValue: function () {
                return '$' + this.formatter.fromRaw(this._sumColumn());
            }
    })
}];

那么pageableGrid就变成了：

var pageableGrid = new Backgrid.Grid({
  columns: [{
    // enable the select-all extension
    name: "",
    cell: "select-row",
    headerCell: "select-all",
  }].concat(columns),
  collection: pageableTerritories,
  footer: TotalFooter.Footer
});