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