Bootstrap Table - Добавить класс в строку на основе значения внутри ячейки - PullRequest
Новая
       6

Bootstrap Table - Добавить класс в строку на основе значения внутри ячейки

0 голосов
/ 29 января 2019

Я создаю и отображаю таблицу начальной загрузки на основе значений, возвращаемых из базы данных: 

 function showEmployeeEfficiencyTable(employeeid, date) {
    $('#emptable').html('<table id="efficiency-table" data-show-columns="false" data-toggle="table" data-filter-control="false"></table>');
    var table = $('#efficiency-table');
  table.bootstrapTable({url: '/php/emp-efficiency.php?employee=' + employeeid + '&date=' + date,
        columns: [{
            field: 'Work',
            title: 'Work',
            sortable: false,
        },{
            field: 'Task',
            title: 'Task',
            sortable: false,
        },{
            field: 'Type',
            title: 'Type',
            sortable: false,
        },{            
            field: 'Start Time',
            title: 'Start Time',
            sortable: false,
        },{
            field: 'Finish Time',
            title: 'Finish Time',
            sortable: false,
        },{
            field: 'Total',
            title: 'Total Time',
            sortable: false,
        },{
            field: 'Efficiency',
            title: 'Percentage',
            sortable: false,
        }]
    });
}

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

Я пытаюсь установить для класса строки значение «Зеленый», если значение меньше 100, и «Красный», если оно выше 100,или игнорируйте добавление класса, если значение равно 0 или равно Null и т. д.

Я пытался: https://stackoverflow.com/a/36019980/10741662 &: https://stackoverflow.com/a/42055314/10741662

среди прочего,

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 31 января 2019

Если вы пытаетесь установить цвет строки на основе определенного значения, вы должны использовать функцию rowStyle, например: 

 function showEmployeeEfficiencyTable(employeeid, date) {
    $('#emptable').html('<table id="efficiency-table" data-show-columns="false" data-toggle="table" data-filter-control="false"></table>');
    var table = $('#efficiency-table');
  table.bootstrapTable({url: '/php/emp-efficiency.php?employee=' + employeeid + '&date=' + date,
        columns: [{
            field: 'Work',
            title: 'Work',
            sortable: false,
        },{
            field: 'Task',
            title: 'Task',
            sortable: false,
        },{
            field: 'Type',
            title: 'Type',
            sortable: false,
        },{            
            field: 'Start Time',
            title: 'Start Time',
            sortable: false,
        },{
            field: 'Finish Time',
            title: 'Finish Time',
            sortable: false,
        },{
            field: 'Total',
            title: 'Total Time',
            sortable: false,
        },{
            field: 'Efficiency',
            title: 'Percentage',
            sortable: false,
        }],
        rowStyle: function (row, index) {
            var customClass = "";

            if (row.Efficiency == 0 || row.Efficiency == null) {
                // do nothing
            }
            else if (row.Efficiency < 100) {
                customClass= 'success';
            }
            else if (row.Efficiency > 100) {
                customClass= 'danger';
            }

            return {
              classes: customClass
            };
          }
    });
}

По умолчанию эти классы Bootstrap (success, danger), окрашивают строку какздесь:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_contextual&stacked=h

...