2017-04-24 83 views
1

我使用Oracle Jet与PHP设计网站。这里按类型划分我想改变每一行的颜色。任何人都可以帮助如何使用自定义行模板动态更改表中行的颜色Oracle Jet

<div id="pagingControlfsa"> 
    <table id="table" summary="Activity List" aria-label="Activity" 
      data-bind="ojComponent: {component: 'ojTable', data: pagingDatasource, columns: 
      [{headerText: 'Remove', id: 'column1', sortable: 'disabled'}, 
      {headerText: 'ID', field: 'activityid'}, 
      {headerText: 'Activity Type', field: 'activityname'}, 
      {headerText: 'Status', field: 'status'}, 
      {headerText: 'Action', id: 'column2', sortable: 'disabled'}], 
      rowTemplate: 'row_tmpl', 
      rootAttributes: {'style':'width: 100%;'}}"> 
    </table> 
    <div id="paging" data-bind="ojComponent: {component: 'ojPagingControl', data: pagingDatasource, pageSize: 15}"> 
    </div> 
</div> 
<br/> 
<br/> 
<script type="text/html" id="row_tmpl">  
    <tr> 
     <td><input type="checkbox" data-bind="attr: {id: activityid}"/></td> 
     <td><div id='actId' data-bind="text: activityid"></div></td> 
     <td><div id="Resource" data-bind="text: name"></div></td> 
     <td><div id="statusact" data-bind="text: status"></div></td> 
     <td><div id="modify_div" data-bind="click:function(data,event){ $parent.editRecord(activityid,data,event)}">Modify</div></td> 
    </tr> 
</script> 

回答

0

你可以使用淘汰赛风格结合这样做是为了改变各行的颜色。你可能会需要把这个在你的行模板,以颜色的每个单元格的行中添加到每个TD元素:

 <td><div data-bind="text: activityid, style: {'background-color': activityname = 'Foo' ? 'green' : 'red'}"></div></td> 

淘汰赛documentation对样式的绑定好消息。他们也有一个CSS绑定,如果你宁愿去那条路线。