如何将小数以进度条百分比显示

Question

问题遇到的现象和发生背景

如何将上述图片中 cup 的占用率 的以 百分比进度条 显示
我这边用的是 ** jqGrid**

问题相关代码，请勿粘贴截图

$(function () {
    $("#jqGrid").jqGrid({
        url: '../serverinforecord/list',
        datatype: "json",
        colModel: [            
            { label: 'id', name: 'id', index: 'id', width: 50, key: true, hidden: true },
            { label: '服务器ip', name: 'serverId', index: 'server_id', width: 80 },
            { label: 'cpu总量', name: 'cpuQuantity', index: 'cpu_quantity', width: 80 ,formatter: cpuFormat},
            { label: 'cpu核数', name: 'cpuNum', index: 'cpu_num', width: 80 },
            { label: 'cpu使用值', name: 'cpuValue', index: 'cpu_value', width: 80 ,formatter: cpuFormat},
            { label: 'cpu占用率', name: 'cpuProportion', index: 'cpu_proportion', width: 80 ,formatter: cpu},
            { label: 'cpu空闲率', name: 'cpuFreeRate', index: 'cpu_free_rate', width: 80 },
            { label: 'cpu等待率', name: 'cpuWaitRate', index: 'cpu_wait_rate', width: 80 },
            { label: '记录时间', name: 'recordTime', index: 'record_time', width: 80 }
        ],
        viewrecords: true,
        height: 385,
        rowNum: 10,
        rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });
    function cpuFormat(cellvalue, options, rowObject) {
        if (cellvalue==""||typeof(cellvalue) == "undefined"){
            return "";
        }else{
            return cellvalue + "MHz";
        }
    };
    function cpu(r) {
        console.log(r);
        return r;
    }
});

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

1. 自己写一个样式

   function cpu(r) {
        let str=Number(r*100).toFixed(2);
        return '<div class="progress">'
                    +'<di v class="progress-bar" style="width: '+ str+'%">'
                      +'<span class="progress-bar-text">'+ str+'%</span>'
                    +'</div>'
                  +'</div>'
    }
   

            .progress {
                height: 18px;
            line-height: 18px;
                position: relative;
                border-radius: 20px;
                background-color: #eee;
            }
            .progress .progress-bar {
                height: 18px;
            line-height: 18px;
                background-color: #009688;
                position: absolute;
                left: 0;
                top: 0;
                width: 0;
                max-width: 100%;
                border-radius: 20px;
                text-align: right;
                transition: all .3s;
                -webkit-transition: all .3s;
            }
            .progress .progress-bar .progress-bar-text {
                color: #fff;
                padding: 0 10px;
            }
   

2. 用layui-progress，因为表格异步加载，没有触发layui的进度条渲染，需要在jqgrid加载完成loadComplete时调用layui的渲染事件

   layui.use('element', function(){
   var element = layui.element;
   $("#jqGrid").jqGrid({
    // ... 
    loadComplete: function() {
      element.render()
    }
   })
   })