更改 table Oracle Jet 中行的颜色
Changing the colour of row in table 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>
您可以使用挖空样式绑定来执行此操作。您可能需要将此添加到行模板中的每个 td 元素,以便为行中的每个单元格着色:
<td><div data-bind="text: activityid, style: {'background-color': activityname = 'Foo' ? 'green' : 'red'}"></div></td>
淘汰赛 documentation 有很好的样式绑定信息。如果您愿意走那条路,他们也有 css 绑定。
我正在使用带有 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>
您可以使用挖空样式绑定来执行此操作。您可能需要将此添加到行模板中的每个 td 元素,以便为行中的每个单元格着色:
<td><div data-bind="text: activityid, style: {'background-color': activityname = 'Foo' ? 'green' : 'red'}"></div></td>
淘汰赛 documentation 有很好的样式绑定信息。如果您愿意走那条路,他们也有 css 绑定。