如何在backgrid中添加用于显示小尺寸img的列

Question

我想在backgrid中添加一个列字段，以显示img和其他与该用户相关的信息。

var columns = [
    { name: "id", label: "Id", cell: "integer",editable: false },
    { name: "active_image", label: "Image", cell: "uri",editable: false },
    { name: "worker_id", label: "Worker", cell: "string",editable: false },
    { name: "city", label: "City", cell: "string",editable: false }
    ];

Answer 1

我建议您创建新的图像单元格类型。然而，最简单的解决方案是扩展基本的Backgrid.Cell:

{
  name: 'active_image',
  label: 'Image',
  editable: false,
  cell: Backgrid.Cell.extend({
    render: function() {
      var src = this.model.get(this.column.get('name'));
      this.$el.html($('<img>').attr('src', src));
      return this;
    }
  })
}

这里的render函数相当简化（并且没有经过测试），只是为了给出howto的概念。