在敲除JS動態表格中將特定的單元格應用於其中取決於它的值

Question

我對Knockout js沒有任何經驗，但是因爲我必須實現功能並努力獲得此方案。

JSP文件獲取JSON數據並將其傳遞給HTML模板以創建動態表。但我必須匹配特定值併爲單元賦予不同樣式（需要更改顏色）。

我探索並發現，如果Foreach被使用和使用，如果條件申請CSS類可以工作，但由於表動態創建，因此很難實現它。

提供下面的代碼，我知道角度的方式來做到這一點，但自從它在淘汰賽JS中掙扎。

以上JSON數據從數據庫動態擷取，如果應用程序服務器正在響應，然後映射到「是」，否則映射爲「否」，在另外我必須設置是指綠色，無指紅色。 我映射了響應值，它工作正常。 但是我無法爲Knockout js設置響應值的顏色（Yes表示綠色，No表示紅色）。能否請你建議我在此

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

下面這裏是JSON數據從服務器獲取並傳遞到表

{ 
    "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" 
    } 
} 

這裏是一個由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();  
     } 

我試圖閱讀這個文檔，也試過各種東西，但未能實現。

Answer 1

假設你可以訪問css，這很簡單。如果不是，它只是稍微簡單一點。 Knockout有一個專門針對css的數據綁定。這是一個例子。

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>

與您的代碼，你只需做一些增加的數據綁定問題。