Js + Bootstrap Table + adminlte - 自定义formatter，在表格内添加箭头样式，调整列宽-优快云博客

本文介绍了一种使用JavaScript实现的动态表格展示方法，并详细解释了如何通过自定义格式化函数来美化表格中的数据，例如添加箭头图标来表示数据趋势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var drawDataTable=function(chartId){
    var dataList = [
                       {
                           "criteria": "q>100",
                           "count":   "400 up",
                           "cRatio": "10% up",
                           "pRatio":  "60% up"

                       },
                       {
                          "criteria": "50&lt;q≤100",　　　　　　//<需要转义，否则被视为html标签
                          "count":   "400 up",
                          "cRatio": "10% up",
                          "pRatio":  "60% up"

                      },{
                            "criteria": "10&lt;q&lt;=50",
                            "count":   "400 down",
                            "cRatio": "10% down",
                            "pRatio":  "60% down"

                        },{
                            "criteria": "0&lt;q&lt;=10",
                            "count":   "400 down",
                            "cRatio": "10% down",
                            "pRatio":  "60% down"

                        },{
                             "criteria": "q=0",
                             "count":   "400 eq",
                             "cRatio": "10% eq",
                             "pRatio":  "60% eq"
                         }
                   ]
    $("#" + chartId).bootstrapTable('destroy').bootstrapTable({
        data: dataList，
        columns:[
            {
                field:'criteria',
                title:'物品数量分布',
                width:"30%"　　　　　　//设置宽度

            },
            {
                field:'count',
                title:'客户数',
                width:"30%",
                formatter: operateFormatter　　　　//自定义样式，传三个参数（value，row, index）,单元格值，行值，索引
            },
            {
                field:'cRatio',
                title:'客户占比',
                width:"25%",
                formatter: operateFormatter
            },
            {
                field:'pRatio',
                title:'物品占比',
                width:"25%",
                formatter: operateFormatter, //自定义方法，添加操作按钮
            }
        ]
    });
    }

function operateFormatter(value, row, index){
    var arr=value.split(" ")
    return arr[0] + arrowStyle(arr[1]);　　//获取自定义箭头样式
}
function arrowStyle(category){
    var temp=''
    switch (category){
        case "up":
            temp='<span class="text-green" style="margin-left:10px"><i class="fa fa-long-arrow-up"></i></span>'
            break;
        case "down":
            temp='<span class="text-red" style="margin-left:10px"><i class="fa fa-long-arrow-down"></i></span>'
            break;
        case "eq":
            temp='<span class="text-yellow" style="margin-left:10px;">━</span>'
            break;
        default:
            break;
    }
    return temp;
}