Цвет строки данных в зависимости от значения флажка - PullRequest
0 голосов
/ 02 июня 2018

Хорошо, а что если я хочу изменить цвет строки на основе значения флажка в таблице данных?Я не могу получить правильный синтаксис.например, ниже значения данных [9] не работает.Я пробовал 1 и правда как с кавычками, так и без них.И с rowCallback тоже.data [7] работает в любом случае.Я уверен, что это вывод значения флажка data [9], ничего не видел по этому поводу.

createdRow: function (row, data, index) {
    if (data[9] == 'checked') {
        $('td', row).css('background-color', 'Red');
    }
    else if (data[7] == '$6') {
        $('td', row).css('background-color', 'Orange');
    }
}

Первый пост, извинения за форматирование

Я нашел этот обходной путь для себя, но должен быть лучший способ:

      createdRow: function (row, data, index) {
                if (data[9] == '<input checked="checked" class="check-box" disabled="disabled" type="checkbox">') {
                    $('td', row).css('background-color', 'Red');
                }
                else if (data[7] == '$6') {
                    $('td', row).css('background-color', 'Orange');
                }
            }

1 Ответ

0 голосов
/ 03 июня 2018

Как насчет этого?

Функция рендеринга используется для получения значения для отображения (html), получения данных, сортировки и фильтрации.Таким образом, вы должны возвращать разные значения для каждой операции (что определяется атрибутом type.

) Теперь во фрагменте возвращаемое значение для извлечения - это значение столбца, а не HTML-код для его отображения.Функция createRow получает данные от этих функций рендеринга, поэтому она больше не получает HTML

$(document).ready( function () {
    $('#myTable').DataTable({
        data: [[5, true], [3, false]],
        columns:[
          {data:0},
          {
            data:1,
            render: function(data, type, row, meta){
                // if type is not "display", it means that we want to sort, filter,
                // or retireve data, so we return the value
                if (type !== "display")
                    return data;
                
                // We return the HTML we want to display now that we are sure
                return `<input class="check-box" ${data?'checked="checked"':''} type="checkbox">` 
            }
          }
        ],
        createdRow: function (row, data, index){
            // Now that we have the data and not the HTML it is cleaner
            if (data[1])
              $('td', row).css('background-color', 'Red');
        }
        
    });
} );
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="myTable">
</table>

PD .: Лучше создать DOM-узел с JQuery и проверить свойство «disabled», которое сравнивает HTML

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...