Question

我使用kogrid显示数据如下所示：

我的淘汰vm对MVC控制器进行ajax调用，以检索如下形状的DTO：

我想在RED中为具有验证失败值的单元格背景着色。例如，数据数组的第一个元素包含＆＃34; CostCentreIsValid＆＃34;值为＆＃34; False＆＃34;的成员，所以我想要＆＃34;成本中心（Dim1）＆＃34;第一行的列为RED。对于相同的数组元素，＆＃34; AccountIsValid＆＃34;成员包含值＆＃34; True＆＃34;，所以我想要＆＃34; GL帐户（帐户）＆＃34;第一行的单元格为绿色。

淘汰视图模型：

use strict";

function ViewModel（interchangeId）{

var edited = function (interchangeId, accountIsValid, costCentreIsValid, supplierIsValid, supplierNo, invoiceNo, costCentre, glAccount, amount, invoiceDesc, originalRec) {
    var self = this;
    // Properties
    self.interchangeId = interchangeId;
    self.supplierNo = ko.observable(supplierNo);
    self.invoiceNo = ko.observable(invoiceNo);
    self.costCentre = ko.observable(costCentre);
    self.glAccount = ko.observable(glAccount);
    self.amount = ko.observable(amount);
    self.invoiceDesc = ko.observable(invoiceDesc);
    self.originalRec = originalRec;
}

var editBatchVm = function () {
    var self = this;
    var $loadingIndicator = $('#loading-indicator');

    // Properties
    self.recs = ko.observableArray([]);
    self.selected = ko.observableArray();

    var textEditTemplate = '<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[$data.field]" /><span data-bind=\"visible: !$parent.selected(), text: $parent.entity[$data.field]\"></span></div>';
    self.columnDefs = [
        { width: 100, field: 'supplierNo', displayName: 'Supplier No', cellTemplate: textEditTemplate },
        { width: 150, field: 'invoiceNo', displayName: 'Invoice No' },
        { width: 150, field: 'costCentre', displayName: 'Cost Centre (Dim1)', cellTemplate: textEditTemplate },
        { width: 200, field: 'glAccount', displayName: 'GL Account (Account)', cellTemplate: textEditTemplate },
        { width: 100, field: 'amount', displayName: 'Amount' },
        { width: 300, field: 'invoiceDesc', displayName: 'Invoice Description' },
    ];

    self.filterOptions = {
        filterText: ko.observable(""),
        useExternalFilter: false
    };

    self.pagingOptions = {
        currentPage: ko.observable(1),
        pageSizes: ko.observableArray([10, 20, 50]),
        pageSize: ko.observable(10),
        totalServerItems: ko.observable(0)
    };

    self.sortInfo = ko.observable({ column: { 'field': 'TimeReceived' }, direction: 'desc' });

    self.gridOptions = {
        data: self.recs,
        columnDefs: self.columnDefs,
        autogenerateColumns: false,
        showGroupPanel: true,
        showFilter: true,
        filterOptions: self.filterOptions,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        sortInfo: self.sortInfo,
        rowHeight: 35,
        selectWithCheckboxOnly: true,
        selectedItems: self.selected,
        canSelectRows: true,
        displaySelectionCheckbox: true,
    };

    self.batchId = ko.observable();

    // Methods

    self.get = function () {
        $loadingIndicator.show();

        $.ajax({
            url: BASE_URL + 'EditBatch/GetRecords',
            type: 'get',
            data: {
                'interchangeId': interchangeId
            },
            contentType: 'application/json; charset=utf-8',
            success: function (data) {

                var recsArray = [];
                $.each(data, function (key, value) {
                    recsArray.push(
                        new edited(
                            interchangeId,
                            value.AccountIsValid,
                            value.CostCentreIsValid,
                            value.SupplierIsValid,
                            value.Transaction.Voucher[0].Transaction[0].ApArInfo.ApArNo,
                            value.Transaction.Voucher[0].Transaction[0].ApArInfo.InvoiceNo,
                            value.Transaction.Voucher[0].Transaction[0].GLAnalysis.Dim1,
                            value.Transaction.Voucher[0].Transaction[0].GLAnalysis.Account,
                            value.Transaction.Voucher[0].Transaction[0].Amounts.Amount,
                            value.Transaction.Voucher[0].Transaction[0].Description,
                            value.Transaction
                            )
                    );
                });
                self.recs(recsArray);
                //batch level info
                self.pagingOptions.totalServerItems(data.length);
                self.batchId(data[0].BatchId);
            }
        });
        $loadingIndicator.hide();
    };

    self.resubmit = function () {
        var data = { Recs: ko.toJS(this.recs) };

        $.ajax({
            type: "POST",
            url: BASE_URL + 'EditBatch/Resubmit',
            data: ko.toJSON(data),
            contentType: 'application/json',
            async: true,
            success: function (data) {
                window.location = BASE_URL + 'APInvoicesSummary/Index';
            },
            error: function (data) {
                toastrs(false);
            }
        });
    }

    // Subscriptions

    self.pagingOptions.pageSize.subscribe(function (data) {
        self.pagingOptions.currentPage(1);
        self.get();
    });

    self.pagingOptions.currentPage.subscribe(function (data) {
        self.get();
    });

    self.sortInfo.subscribe(function (data) {
        self.pagingOptions.currentPage(1);
        self.get();
    });

    //self.gridOptions.selectedItems.subscribe(function (data) {
    //    if (data.length > 0) {
    //        self.date(data[0].date);
    //        self.voucherNo(data[0].voucherNo);
    //        self.description(data[0].description);
    //        self.amount(data[0].amount);
    //    }
    //});
}

/////////////////////////////////////////////////////////////////
// Let's kick it all off
var vm = new editBatchVm();
ko.applyBindings(vm, $("#KoSection")[0]);
vm.get();

};

有没有人遇到过如何做到这一点的例子？

Answer 1

你可以bind the style：

<li data-bind="style: { color: !AccountIsValid() ? 'red' }">

或bind the css：

<li data-bind="css: { failed--account: !AccountIsValid() }">

然后在你的样式表中：

failed--account {
  color: red;
}

备注

我将数据置于模型中，AccountIsValid是可观察的，如果是绑定但不可观察，只需删除括号color: !AccountIsValid。

如果您的数据没有绑定，可以通过data[0].AccountIsValid访问...但我建议绑定它。

Answer 2

以下是我修复它的方法：

在site.css

中

.failed-validation {color：red; }

.passed-validation {color：green; }

和淘汰赛中的js：

var supplierEditTemplate = `<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[$data.field]" />
                                <span data-bind=\"visible: !$parent.selected(),
                                    text: $parent.entity[$data.field],
                                    css: $parent.entity.supplierIsValid() === 'True' ? \'passed-validation\' : \'failed-validation\'">
                                </span>
                            </div>`;
    self.columnDefs = [
        { width: 100, field: 'supplierNo', displayName: 'Supplier No', cellTemplate: supplierEditTemplate },

KO网格单元的条件格式

2 个答案: