在backgridjs之躯 [英] sum footer in backgridjs

问题描述

我有以下backgridjs表。

I have a backgridjs table below.

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

一切的伟大工程，如预期，但我在搞清楚如何设置一个总的页脚细胞总数列之苦。

Everything works great and as expected, except I'm having a hard time figuring out how to set a total footer cell for the total column.

如果我输入下面的控制台命令我得到了我想要的总页脚单元格。

If I type the command below in the console I get the footer cell I want with the total.

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

但我想的页脚细胞露面时表呈现。我曾尝试以下，但总显示$ 0

But I want the the footer cell to show up when the table is rendered. I have tried the following but total shows $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;
  }

});

我将不胜AP preciate如果有人可以帮助我这一个。就像事先总是感谢。

I would greatly appreciate if someone can help me figure this one out. Like always thanks in advance.

推荐答案

这解决了我的问题与页脚总，但是当我分页页脚总不更新。

This solved my issue with the footer total, however when I paginate footer total doesn't update.

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>");
    }
  });

这篇关于在backgridjs之躯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！