Application de style à une cellule particulière dans la table dynamique JS knockout en fonction de sa valeur

Question

Je n'ai aucune expérience dans Knockout js mais depuis que je dois mettre en œuvre la fonctionnalité et lutter pour mettre la main sur ce scénario. Les fichiers JSP récupèrent des données JSON et les transmettent au modèle HTML pour créer une table dynamique. Mais je dois faire correspondre des valeurs particulières et donner un style différent aux cellules (besoin de changer de couleur).

J'ai exploré et découvert si Foreach est utilisé et si utiliser if condition pour appliquer la classe css peut fonctionner mais comme la table est créée dynamiquement, il est difficile de l'obtenir.

En fournissant le code ci-dessous, je sais comment le faire de manière angulaire, mais puisque son knock-out JS est en difficulté.

Les données JSON ci-dessus allant chercher dynamiquement à partir de DB, si App Server répond carte puis sur « Oui » carte autrement « Non », en plus je dois mettre Oui signifie la couleur verte, Non signifie la couleur rouge. J'ai mappé les valeurs de réponse, cela fonctionne très bien. Mais je ne suis pas en mesure de définir des couleurs pour les valeurs de réponse (Oui signifie vert et Non signifie couleur rouge) dans Knockout js. Pouvez-vous s'il vous plaît me suggérer sur ce

<table id="monitorTable" summary="Table Data Test" aria-label="Table Data Test" 
         contextmenu="empty" 
         data-bind="ojComponent: {component: 'ojTable', 
         data: testdatasource, 
         columnsDefault: {sortable: 'disabled'}, 
         columns: tableColumns, 
         scrollPolicy: scrollPolicy, 
         scrollPolicyOptions: scrollPolicyOptions}"></table> 

Ci-dessous Voici les données JSON extraites du serveur et transmis à la table

{ 
    "label": "App Server", 
    "collection": [{ 
     "responding": "Yes", 
     "appserver": "DEFAULT", 
     "className": "success", 
     "id": 1 
    }, { 
     "responding": "No", 
     "appserver": "ORACLEQUEUE", 
     "className": "failed", 
     "id": 2 
    }, { 
     "responding": "No", 
     "appserver": "SECONDARY", 
     "className": "failed", 
     "id": 3 
    }, { 
     "responding": "No", 
     "appserver": "TERTIARY", 
     "className": "failed", 
     "id": 4 
    }], 
    "serverTimestamp": "2017-07-07T03:51:21.949+0000", 
    "dataTimestamp": "2017-07-07T03:51:21.949+0000", 
    "tableColumns": [{ 
     "headerText": "App Server", 
     "field": "appserver", 
     "sortable": "disabled" 
    }, { 
     "headerText": "Responding", 
     "field": "responding", 
     "sortable": "disabled", 
     "className": "" 
    }], 
    "scrollPolicy": "auto", 
    "scrollPolicyOptions": { 
     "fetchSize": "15", 
     "maxCount": "1000" 
    } 
} 

Voici le code qui récupère des données à partir du serveur par les fichiers JSP

function addScalabilityMonitors() { 
      console.log("moved to scalability"); 
      //App Scalability 
      monitors.addMonitorPoint(sts.apiBaseUrl() + 'ScalabilityAppServer1.jsp', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability'); 
      //Web Scalability 
      monitors.addMonitorPoint(sts.apiBaseUrl() + 'ScalabilityWebServer1.jsp', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability'); 
      //Response Time 
      monitors.addMonitorPoint(sts.apiBaseUrl() + 'Scalability.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'gauge', 'scalability'); 
      //Log files 
      monitors.addMonitorPoint(sts.apiBaseUrl() + 'logfile.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability'); 
      monitors.addMonitorPoint(sts.apiBaseUrl() + 'ProcessSchedules.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability'); 
      monitors.addMonitorPoint(sts.apiBaseUrl() + 'BusinessSequence.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability'); 
      monitors.addMonitorPoint(sts.apiBaseUrl() + 'DatabaseJobs.json', 'oj-masonrylayout-tile-3x2', true, 15000, 'grid', 'scalability'); 
      //myPostProcessingLogic();  
     } 

J'ai essayé de lire la documentation pour cela, j'ai aussi essayé différentes choses mais je n'ai pas réussi à l'implémenter.

Answer 1

En supposant que vous avez accès à la css c'est assez simple. Sinon, c'est seulement un peu simple. Knockout a une liaison de données spécifiquement pour css. Voici un exemple.

function Server(data) { 
 
    var self = this; 
 

 
    self.Name = ko.observable(data.Name); 
 
    self.Status = ko.observable(data.Status); 
 
} 
 

 
function viewModel() { 
 
    var self = this; 
 

 
    self.Servers = ko.observableArray(); 
 

 
    self.Load = function() { 
 
    self.Servers.push(new Server({ 
 
     Name: "Email", 
 
     Status: "Online" 
 
    })); 
 
    self.Servers.push(new Server({ 
 
     Name: "TPS Reports", 
 
     Status: "Offline" 
 
    })); 
 
    }; 
 

 
    self.Load(); 
 

 
} 
 

 
ko.applyBindings(new viewModel());

.red { 
 
    background-color: red; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<h3> CSS Control</h3> 
 
<table border=1> 
 
    <thead> 
 
    <tr> 
 
     <th> Server Name</th> 
 
     <th> Server Status</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: Servers"> 
 
    <tr> 
 
     <td> <span data-bind="text: Name"> </span> </td> 
 
     <td data-bind="css: { red: Status() == 'Offline', blue: Status() == 'Online' } "> <span data-bind="text: Status"> </span> </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br><br><br><br> 
 
<h3> No CSS Control</h3> 
 
<table border=1> 
 
    <thead> 
 
    <tr> 
 
     <th> Server Name</th> 
 
     <th> Server Status</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: Servers"> 
 
    <tr> 
 
     <td> <span data-bind="text: Name"> </span> </td> 
 
     <!-- Note: anything with a hyphen must be surrounded in single quotes --> 
 
     <td data-bind="style: { 'background-color': Status() == 'Online' ? 'green' : 'black' } "> <span data-bind="text: Status"> </span> </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Avec votre code, vous simplement faire quelques ajouts à la liaison de données en question.