Применение стиля к определенной ячейке в динамической таблице JS в зависимости от ее значения

1

У меня нет опыта в Knockout js, но поскольку я должен реализовать функциональность и изо всех сил пытаюсь понять этот сценарий.

JSP файлы извлекают данные JSON и передаются в шаблон HTML для создания динамической таблицы. Но мне нужно сопоставить определенные значения и давать разные стили для ячеек (нужно изменить цвет).

Я исследовал и выяснил, используется ли Foreach и использует ли это условие для применения класса css, но поскольку таблица создается динамически, поэтому трудно достичь этого.

Предоставляя код ниже, я знаю угловой способ сделать это, но с тех пор, как он в нокауте JS борется. Изображение 174551

Вышеуказанные данные JSON динамически извлекаются из БД, если App Server отвечает, а затем отображает "Да", в противном случае отображается "Нет", кроме того, мне нужно установить "Да" зеленый цвет, "Нет" означает "Красный цвет". Я сопоставлял отвечающие ценности, он работает нормально. Но я не могу установить цвета для отвечающих значений (Да означает зеленый и Нет означает красный цвет) в Knockout js. Можете ли вы предложить мне об этом

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

Я попытался прочитать документацию для этого, также попробовал разные вещи, но не смог реализовать.

Теги:
knockout.js
knockout-mvc

1 ответ

2

Предполагая, что у вас есть доступ к css, это довольно просто. Если нет, то это немного просто. Нокаут имеет привязку данных для 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>

С вашим кодом вы просто внесете некоторые дополнения в привязку данных.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню