bootstrapTable改變列、行顏色


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");
        }
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM