Bootstrap Table - 根据单元格内的值将 class 添加到行

Question

我正在根据从数据库返回的值创建和显示 bootstrap table：

 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,
        }]
    });
}

table 显示正常。但是，我无法访问效率字段的值，

如果值低于 100，我试图将行 class 设置为 'Green'，如果值高于 100，则设置为 'Red'，或者忽略添加 class 如果值为 0 或 Null 等！

我尝试过： & :

除其他外，

如有任何帮助，我们将不胜感激！

Answer 1

如果您尝试根据特定值设置行颜色，您应该使用这样的 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

Bootstrap Table - 根据单元格内的值将 class 添加到行

Bootstrap Table - Add class to Row based on value inside Cell

javascript

css

bootstrap-table