2014-01-22 3 views
2
<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> 

Мне нужно добавить фоновый цвет к каждой строке (tr) в соответствии с условием, смотрел документацию, соответствующую «Backgrid.Row.extend», что вы можете сделать, только это Мне нужно создать базовый шаблон .., который будет реплицироваться в каждой строке (tr), просто у меня также есть некоторые столбцы costumizo, как показывает код. Мой вопрос: вы можете добавить событие для прослушивания каждой строки, и я могу только изменить его атрибуты, не нарушая структуру (html)?как настроить backgrid row

+0

Все, что вы хотите сделать. Для исправления классов в Backgrid в настоящее время является AWFUL HACK: https://github.com/wyuenho/backgrid/issues/465 – cliffbarnes

ответ

4

Каждый экземпляр каждой строки или ячейки будет иметь доступ ко всей модели. Вы можете получить к ним доступ из своего метода render и добавить туда свои классы CSS. Что-то вроде этого будет делать:

var MyRow = Backgrid.Row.extend({ 
    render: function() { 
    MyRow.__super__.render.apply(this, arguments); 
    if (this.model.get("someAttribute")) { 
     this.el.classList.add("aClass"); 
    } 
    return this; 
    } 
}); 

Ряд строк, они все одинаковы. Нет необходимости использовать шаблон.

+0

Здравствуйте, спасибо! Я попытался применить ваше предложение, большинство из которых имели эту ошибку в ответ: Uncaught TypeError: Не удается прочитать свойство '$ el' неопределенного backgrid.min.js: 8 –

+0

Только что отредактировал мой ответ. Я забыл вернуть это. –

+0

случается, что я упомянул в оригинальной теме, шаблон пуст. без настройки строки сетка заполняется. –