Question

尝试在带有主干的表中创建一个表但无法找到方法。任何人都可以通过一个例子来帮助我实现这个目标吗？

我的收藏：

this.collection = new Backbone.Collection([
            { first: 'John', last: 'Doe', desig: 'E1', location: 'C' },
            { first: 'Mary', last: 'Jane', desig: 'E3', location: 'C' },
            { first: 'Billy', last: 'Bob', desig: 'E2', location: 'C' },
            { first: 'Dexter', last: 'Morgan', desig: 'E1', location: 'P' },
            { first: 'Walter', last: 'White', desig: 'E2', location: 'P' },
            { first: 'Billy', last: 'Bobby', desig: 'E1', location: 'B' }
        ]);

普通视图：使用表格视图实现此目的。参考代码here

first    last    desig    location
----------------------------------
Billy    Bobby    E1       B
Walter   White    E2       P
Dexter   Morgan   E1       P
Billy    Bob      E2       C
Marry    Jane     E3       C
John     Doe      E1       C

想要按位置分组，然后想要渲染为新视图，如下所示

location    first    last    desig    
----------------------------------
C           Billy    Bob     E2
            Marry    Jane    E3
            John     Doe     E1
P           Walter   White   E2
            Dexter   Morgan  E1
B           Billy    Bobby   E1

使用下划线我们可以进行分组但在那之后，我正在努力在上面的视图中渲染该对象

_.groupby(this.collection, "location");

给了我一个具有所需结果的对象。

Answer 1

表中的每一行都应该在Backbone.View中表示。您想要的分组主要是标准HTML表格的rowspan功能。

请参阅代码段：

var collection = new Backbone.Collection([{
  first: 'John',
  last: 'Doe',
  desig: 'E1',
  location: 'Chennai'
}, {
  first: 'Mary',
  last: 'Jane',
  desig: 'E3',
  location: 'Chennai'
}, {
  first: 'Billy',
  last: 'Bob',
  desig: 'E2',
  location: 'Chennai'
}, {
  first: 'Dexter',
  last: 'Morgan',
  desig: 'E1',
  location: 'Pune'
}, {
  first: 'Walter',
  last: 'White',
  desig: 'E2',
  location: 'Pune'
}, {
  first: 'Billy',
  last: 'Bobby',
  desig: 'E1',
  location: 'Bangalore'
}]);

var GroupRowView = Backbone.View.extend({
  tagName: 'tr',
  initialize: function(options) {
    this.groupBy = options.groupBy;
    this.index = options.index;
    this.total = options.total;
  },
  render: function() {
    this.$el.empty();
    if (this.index == 0) {
      this.$el.append('<td rowspan="' + this.total + '">' + this.model.get(this.groupBy) + '</td>');
    }
    _.each(this.model.omit(this.groupBy), function(value, key) {
      this.$el.append('<td>' + value + '</td>');
    }, this);
    return this;
  }
});

var SimpleRowView = Backbone.View.extend({
  tagName: 'tr',
  render: function() {
    this.$el.empty();
    //this.$el.append('<td>' + this.model.get('location') + '</td>')
    _.each(this.model.values(), function(value) {
      this.$el.append('<td>' + value + '</td>');
    }, this);
    return this;
  }
})

var TableView = Backbone.View.extend({
  tagName: 'table',
  render: function() {
    /*var self = this;
    self.$el.empty();
    self.collection.each(function(rowModel) {
      self.$el.append(_.template('<tr><td><%= location %></td><td><%= first %></td><td><%= last %></td><td><%= desig %></td></tr>')(rowModel.attributes))
    });*/
    var self = this;
    self.$el.empty();
    self.collection.each(function(model) {
      var row = new SimpleRowView({
        model: model
      });
      self.$el.append(row.render().el);
    });
    return this;
  },
  groupCollection: function() {
    var self = this;
    var groups = self.collection.groupBy('location');
    self.$el.empty();
    _.each(groups, function(group) {
      var length = group.length;
      _.each(group, function(model, i) {
        var row = new GroupRowView({
          model: model,
          groupBy: 'location',
          index: i,
          total: length
        });
        self.$el.append(row.render().el);
      })
    })
  }
});
var table = new TableView({
  collection: collection
});

$('#table-container').append(table.render().el);
$('#sortBtn').click(function(e) {
  table.groupCollection();
})

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>


<p>What the table should be:</p>
<table border="1">
  <thead>
    <tr>
      <th>Location</th>
      <th>First</th>
      <th>Last</th>
      <th>Desig</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">C</td>
      <td>Billy</td>
      <td>Bob</td>
      <td>E2</td>
    </tr>
    <tr>
      <td>Marry</td>
      <td>Jane</td>
      <td>E3</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>E1</td>
    </tr>
    <tr>
      <td rowspan="2">P</td>
      <td>Walter</td>
      <td>White</td>
      <td>E2</td>
    </tr>
    <tr>
      <td>Dexter</td>
      <td>Morgan</td>
      <td>E1</td>
    </tr>
    <tr>
      <td rowspan="1">B</td>
      <td>Billy</td>
      <td>Bobby</td>
      <td>E1</td>
    </tr>
  </tbody>
</table>

<p>What the resulting table is:</p>

<button id="sortBtn">Sort!</button>

<div id="table-container">

</div>

Answer 2

使用用户输入

更新了2个不同的视图

jsfiddle.net/WebDev81/ddbf9ckv/10

让我知道任何人都有更好的方法来实现这一目标。

使用主干JS创建子视图（另一个表中的表）

2 个答案: