IDEA BootStrap 表格变颜色自定义渲染背景色字体颜色操作渲染图片显示图片渲染

tanzongbiao

已于 2022-06-19 17:29:47 修改

阅读量1.5k

点赞数

分类专栏： BootStrap 文章标签： IDEA BootStrap 表格变颜色自定义渲染字体颜色

于 2021-11-29 16:21:04 首次发布

本文链接：https://blog.csdn.net/tanzongbiao/article/details/121612087

版权

BootStrap 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了四种在前端表格中实现不同样式的渲染方法，包括背景色、字体颜色、操作按钮和图片显示。通过使用formatter和events属性，可以自定义单元格内容，如改变启用状态的显示、数量的颜色标记、编辑与删除操作按钮，以及图片的预览链接。这些技巧对于提升前端界面的交互性和美观性具有重要作用。

摘要由CSDN通过智能技术生成

方式一：背景色

{
    field: 'useFlag',
    title: '是否启用',
    align: 'center',
    formatter: function (value, row, index){
        if(dictionMapGlobal != null && dictionMapGlobal.length > 0){
            var i = 0;
            while (i < dictionMapGlobal.length){
                if(dictionMapGlobal[i].key == value){
                    var valueNew = value;
                    if(value == 1){
                        valueNew = '<span class="badge badge-success">' + dictionMapGlobal[i].value + '</span>';
                    } else if(value == 0){
                        valueNew = '<span class="badge badge-warning">' + dictionMapGlobal[i].value + '</span>';
                    }
                    return valueNew;
                }
                i++;
            }
        }
    }
},

方式二：字体颜色

{
    field: 'num',
    title: '数量',
    align: 'center',
    formatter: function indexFormatter(value, row, index){
        var newvalue = "";
        if(value >= 0){
            newvalue = '<span class="text text-primary">' + value + '</span>';
        } else {
            newvalue = '<span class="text text-danger">' + value + '</span>';
        }
        return newvalue;
    }
},

方式三：操作渲染

{
    field: '',
    title: '操作',
    align: 'center',
    width: 80,
    events: operateEvents,
    formatter: function (value, row, index){
        var btnInfo='';
        btnInfo += '<button style="margin-right: 2px;padding: 1px" type="button" class="modify btn btn-outline btn-warning btn-sm">编辑</button>';
        btnInfo += '<button style="margin-right: 2px;padding: 1px" type="button" class="delete btn btn-outline btn-danger btn-sm">删除</button>';
        return btnInfo;
    }
}

方式四：图片显示图片渲染

{
    field: 'imageUrl',
    title: '图片',
    align: 'center',
    //visible: false,
    formatter: function (value, row, index){
        var valueNew = "";
        valueNew += '<a href=' + value + ' target="_blank">';
        valueNew += '<img height="40px" style="border-radius: 6px;" src=' + value + '>';
        valueNew += '</a>';
        return valueNew;
    }
},

使用实例

formatter: function (value, row, index){
    return imgFormat(value);
}

//图片处理
function imgFormat(value) {
    //为空不处理
    if(value == null || value == ""){
        return value;
    }
    //有值才处理
    value = imgPreGlobal + value;
    var valueNew = "";
    valueNew += '<a href=' + value + ' target="_blank">';
    valueNew += '<img height="30px" style="border-radius: 6px;" src=' + value + '>';
    valueNew += '</a>';
    return valueNew;
}