Backgrid.js 与主干答案

【问题标题】：Backgrid.js with BackboneBackgrid.js 与主干
【发布时间】：2013-07-30 19:03:19
【问题描述】：

我正在使用 Backgrid 作为表结构。现在，我必须添加具有编辑、查看、删除按钮和列标题“操作”的操作列。我不知道如何使用 Backgrid 来做到这一点。由于我们为一列提供了一个单元格，所以我如何在一列下合并多个单元格。有什么想法吗？

【问题讨论】：

【解决方案1】：

这个问题有点老了，所以我不确定你是否找到了答案。我正在做一些非常相似的事情，发现您可以在创建列时扩展 Backgrid 单元格。希望这会有所帮助！

var columns = [
    {
        OTHER COLUMNS GO HERE
    },
    {
        name: 'actions',
        label: 'Actions',
        editable: false,
        sortable: false,
        cell: Backgrid.Cell.extend({
            template: _.template(" TEMPLATE OR HTML GOES HERE "),

            render: function () {
                this.$el.html(this.template());
                return this;
            }
       })
    }
]

编辑：在意识到可排序默认为 true 之后，我刚刚添加了可排序选项。您可能不想对操作列进行排序。 :)

【讨论】：

如何将按钮上的点击事件冒泡到该视图的控制器？

【解决方案2】：

只是添加到已接受的答案中，在扩展 Backgrid.Cell 类时，非常重要到 return this 函数内的 render()。

Backgrid 默认Row 类/对象使用这样的单元格：

render: function () {    
  ...
  fragment.appendChild(this.cells[i].render().el);
  ...
}

它期望render() 可以链接并返回对象本身。

所以... 别忘了return this;

【讨论】：