bootstrapTable改变列、行颜色

tongsi 2021-08-30 原文

1.改变列颜色

{
            title: \'运单编号\',
            field: \'waybillNumber\',
            align: \'center\',
            valign: \'middle\',
            cellStyle: function (value, row, index) {
                if (row.focusMark == "0") {
                    return {css: {"background-color": "red"}};
                }
                if (row.coordinateMark == "1") {
                    return {css: {"background-color": "#cb7f71"}};
                }
                if (row.coordinateMark == "2") {
                    return {css: {"background-color": "#71cbb9"}};
                }
                return \'\';
            }
}

2.改变行颜色

$("#table").bootstrapTable({ 
url: dataurl,
            method: "post",
            dataType: "json",
//......
onLoadSuccess: function (row) {               
                getTdValue(row);
            }
});
//当远程数据被加载完成后触发
function getTdValue(row) {
    var tableId = document.getElementById("table");
    var y = 0;
    for (var i = 0; i < row.rows.length; i++) {
        //将已标记的数据改变背景颜色
        y++;
        if (row.rows[i].coordinateMark == "1") {
            tableId.rows[y].setAttribute("style", "background-color:#cb7f71");
        }
        if (row.rows[i].coordinateMark == "2") {
            tableId.rows[y].setAttribute("style", "background-color:#71cbb9");
        }
        if (row.rows[i].focusMark == "0") {
            tableId.rows[y].setAttribute("style", "background-color:red");
        }
        if (row.rows[i].focusMark == "2") {
            tableId.rows[y].setAttribute("style", "background-color:#830303");
        }
    }
}