如何使用Rivets <table> </table>绑定时为单元格设置颜色条件

时间:2015-02-15 15:44:08

标签: javascript html html-table rivets.js

我使用铆钉进行HTML表格绑定:

    <table class="table table-bordered table-condensed table-striped line-item POSummaryTable">
        <thead>
            <tr>
                <th style="text-align: left;">Item Number</th>
                <th style="text-align: left;">Item Description</th>
                <th style="text-align: right;">PO Ordered Quantity</th>
                <th style="text-align: right;">PO Received Quantity</th>
                <th style="text-align: right;">PO Item Cost</th>
                <th style="text-align: right;">PO Total Cost</th>
                <th style="text-align: left;">Invoice Number</th>
                <th style="text-align: right;">Invoice Quantity</th>
                <th style="text-align: right;">Invoice Item Cost</th>
                <th style="text-align: right;">Invoice Total Cost</th>
                <th style="text-align: center;">View Details</th>
            </tr>
        </thead>

        <tbody>
            <tr data-rv-each-poitem="model.POItems" class="POSummaryTable_POItems">
                <td style="text-align: left;" data-rv-text="poitem.Number"></td>
                <td style="text-align: left;" data-rv-text="poitem.Description"></td>
                <td style="text-align: right;" data-rv-text="poitem.QuantityOrdered"></td>
                <td style="text-align: right;" data-rv-text="poitem.QuantityReceived"></td>
                <td style="text-align: right;" data-rv-text="poitem.Cost | currency"></td>
                <td style="text-align: right;" data-rv-text="poitem.TotalCost | currency"></td>
                <td style="text-align: right;"></td>
                <td style="text-align: right;" data-rv-text="poitem.InvoiceTotalQuantityAfterAdjustment"></td>
                <td style="text-align: right;" data-rv-text="poitem.AverageInvoiceItemCost | currency"></td>
                <td style="text-align: right;" data-rv-text="poitem.InvoiceTotalCostAfterAdjustment | currency"></td>
                <td style="text-align: center;"><button type="button" id="btnShowInvoiceItems" class="btn btn-primary btnShowInvoiceItems" data-rv-data-poitemid="poitem.PurchaseOrderItemId" data-rv-show="model.POItems | hasItem"><i class="icon-chevron-down"></i><span>Show Invoice Item(s)</span></button></td>
            </tr>
        </tbody>
    </table>

我想为“发票总成本”列中的单元格设置颜色条件,就像连续一样,如果“发票数量”为0,则“发票总成本”将为红色。

1 个答案:

答案 0 :(得分:0)

你签出了rv-class-[yourclass]吗?

我创建了一个小jsfiddle:http://jsfiddle.net/0jjwgpqt/

在你的情况下:

HTML:

<td rv-class-red="poitem.isInvoiceTotalCostZero" rv-text="poitem.InvoiceTotalCostAfterAdjustment | currency"></td>

模型:

    ...
    isInvoiceTotalCostZero: false,
    InvoiceTotalCostAfterAdjustment: function() {
        var calc = 2 - 2; //your calc
        this.isInvoiceTotalCostZero = 0 == calc;
        return calc;
    }
    ...

问候

编辑:

还有两个可用的参数,您可以从中访问对象

InvoiceTotalCostAfterAdjustment: function(event, scope) { ... }