Question

我正在基于数据库返回的值创建并显示引导表：

 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

还有其他事情

任何帮助将不胜感激！

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

引导表-根据单元格内的值将类添加到行

1 个答案: