KO 网格单元格的条件格式

Question

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

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

我想将具有未通过验证的值的单元格背景涂成红色。例如，数据数组的第一个元素包含一个 "CostCentreIsValid" 成员，其值为 "False"，因此我希望第一行的 "Cost Centre (Dim1)" 列为红色。对于同一个数组元素，"AccountIsValid" 成员包含值 "True"，因此我希望第一行的 "GL Account (Account)" 单元格为绿色。

Knockout 视图模型：

"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 网格单元格的条件格式

Conditional formatting of KO grid cells

javascript

knockout.js

kogrid