Javascript 如何自定义backgrid行

我需要根据条件为每一行tr添加背景色，我正在查看文档met Backgrid.row.extend，我只需要创建一个基本模板。。这将在每一行tr中复制，正如代码所示，我还有一些列costumizo。

---

我的问题是。。您可以添加一个事件来侦听每一行，而我只能在不中断html结构的情况下更改其属性？

每一行或单元格实例都可以访问整个模型。您可以从render方法中访问它们，并在其中添加CSS类。这样做可以：

<script type="text/template" id="date-cell">
    <%= date.dateBegin %> até <%= date.dateEnd %>
    <br>
    <%= date.timeBegin %> até <%= date.timeEnd %>
</script>

<script type="text/template" id="status-cell">
    <% if (order.enable) { %>
        <% _.each(order.contacts, function(contact) { %>
            <span class="contact-type"><%= contact.value %></span>
        <% }); %>
    <% } else { %>
        <% if (order.expired) { %>
            <span class="label label-expired">Expirado</span>
        <% } else { %>
            <span class="label label-closed">Fechado</span>
        <% } %>
    <% } %>
</script>

<script type="text/javascript">
    var onRefreshGrid;

    $(function() {

        var Order,
            OrderCollection,
            orders,
            grid;

        Order = Backbone.Model.extend({});

        OrderCollection = Backbone.Collection.extend({
            modal: Order,
            url: 'http://localhost:2000/orders.php'
        });

        orders = new OrderCollection();

        var columns = [{
            name : "hash",
            label: "Cod. Pedido",
            cell : 'string',
            editable: false
          },
          {
            name : "user",
            label: "Nome",
            cell: "string",
            editable: false
          },
          {
            name : "order",
            label: "Status",
            cell : Backgrid.StringCell.extend({
                template: _.template($('#status-cell').html()),
                render: function () {
                    this.$el.html(this.template(this.model.attributes));
                    return this;
                }
            }),
            editable: false
          },
          {
            name : "date",
            label: "Data",
            cell: Backgrid.StringCell.extend({
                template: _.template(
                    $('#date-cell').html()
                ),
                render: function() {
                    this.$el.html(this.template(this.model.attributes));
                    return this;
                }
            }),
            editable: false
        }];

        // Initialize a new Grid instance
        grid = new Backgrid.Grid({
            columns: columns,
            collection: orders
        });

        // Render the grid and attach the root to your HTML document
        $('#datagrid').append(grid.render().el);

        onRefreshGrid = function () {
            orders.fetch({});
        };

        // auto execute
        onRefreshGrid();

    });
</script>

---

一排就是一排，它们都是一样的。无需使用模板。

每一行或单元格实例都可以访问整个模型。您可以从render方法中访问它们，并在其中添加CSS类。这样做可以：

<script type="text/template" id="date-cell">
    <%= date.dateBegin %> até <%= date.dateEnd %>
    <br>
    <%= date.timeBegin %> até <%= date.timeEnd %>
</script>

<script type="text/template" id="status-cell">
    <% if (order.enable) { %>
        <% _.each(order.contacts, function(contact) { %>
            <span class="contact-type"><%= contact.value %></span>
        <% }); %>
    <% } else { %>
        <% if (order.expired) { %>
            <span class="label label-expired">Expirado</span>
        <% } else { %>
            <span class="label label-closed">Fechado</span>
        <% } %>
    <% } %>
</script>

<script type="text/javascript">
    var onRefreshGrid;

    $(function() {

        var Order,
            OrderCollection,
            orders,
            grid;

        Order = Backbone.Model.extend({});

        OrderCollection = Backbone.Collection.extend({
            modal: Order,
            url: 'http://localhost:2000/orders.php'
        });

        orders = new OrderCollection();

        var columns = [{
            name : "hash",
            label: "Cod. Pedido",
            cell : 'string',
            editable: false
          },
          {
            name : "user",
            label: "Nome",
            cell: "string",
            editable: false
          },
          {
            name : "order",
            label: "Status",
            cell : Backgrid.StringCell.extend({
                template: _.template($('#status-cell').html()),
                render: function () {
                    this.$el.html(this.template(this.model.attributes));
                    return this;
                }
            }),
            editable: false
          },
          {
            name : "date",
            label: "Data",
            cell: Backgrid.StringCell.extend({
                template: _.template(
                    $('#date-cell').html()
                ),
                render: function() {
                    this.$el.html(this.template(this.model.attributes));
                    return this;
                }
            }),
            editable: false
        }];

        // Initialize a new Grid instance
        grid = new Backgrid.Grid({
            columns: columns,
            collection: orders
        });

        // Render the grid and attach the root to your HTML document
        $('#datagrid').append(grid.render().el);

        onRefreshGrid = function () {
            orders.fetch({});
        };

        // auto execute
        onRefreshGrid();

    });
</script>

---

一排就是一排，它们都是一样的。无需使用模板。

您好，谢谢！我试图应用你的建议，但大多数人都有这样的错误：uncaughttypeerror:无法读取未定义backgrid.min.js:8的属性“$el”，正如我在原始主题中提到的，模板是空的。如果没有自定义行，网格已填充。很抱歉，我无法理解您的意思。你看过文件了吗？您必须将MyRow类传递给网格的构造函数。请原谅我的英语！我只是这样做了：只是再次编辑了答案。我忘了打超级电话了。现在应该可以了。谢谢大家！我试图应用你的建议，但大多数人都有这样的错误：uncaughttypeerror:无法读取未定义backgrid.min.js:8的属性“$el”，正如我在原始主题中提到的，模板是空的。如果没有自定义行，网格已填充。很抱歉，我无法理解您的意思。你看过文件了吗？您必须将MyRow类传递给网格的构造函数。请原谅我的英语！我只是这样做了：只是再次编辑了答案。我忘了打超级电话了。现在应该可以了，你想做什么都行。修复Backgrid中的类目前是一项非常糟糕的技术：任何你想做的事情。修复Backgrid中的类目前是一个可怕的黑客行为：