Mise en forme conditionnelle des cellules de grille KO

Question

j'utilise kogrid pour afficher les données comme indiqué ci-dessous:

Mon vm knock-out fait un appel ajax à un contrôleur MVC pour récupérer un DTO en forme de la façon suivante:

Je voudrais colorer en rouge l'arrière-plan cellulaire qui ont des valeurs qui ont échoué la validation. Par exemple, le 1er élément du tableau de données contient un membre "CostCentreIsValid" avec la valeur "False", donc je voudrais que la colonne "Centre de coûts (Dim1)" de la 1ère ligne soit ROUGE. Pour le même élément de tableau, le membre "AccountIsValid" contient la valeur "True", donc je voudrais que la cellule "GL Account (Account)" de la première rangée soit VERTE.

modèle de vue Knockout:

use strict"; 

fonction 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(); 

};

Est-ce que quelqu'un a rencontré des exemples de comment faire s'il vous plaît?

Answer 1

Voilà comment je l'ai fixé:

Dans le site.css

.failed validation {color: red; }

.passed-validation {couleur: vert; }

et dans les js knock-out:

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 }, 

Answer 2

Vous pouvez bind the style:

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

Ou bind the css:

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

Et puis dans votre feuille de style:

failed--account { 
    color: red; 
} 

---

NOTES

Je suposed vos données sont dans un modèle et AccountIsValid est observable, si on binded mais pas observable juste la parenthèse supprimer color: !AccountIsValid.

Si vos données ne sont pas liées vous pouvez y accéder via data[0].AccountIsValid ... Mais je recommanderais de le lier.