bootstrap 表格列格式为进度条，并从后台获取进度的数据

效果如图：

    @ApiOperation(value = "获取进度", notes = "获取进度")
    @RequestMapping(value = "/getProcess", method = RequestMethod.GET)
    @ResponseBody
    public Map getProcessValues(@RequestParam(value = "planId", required = false, defaultValue = "") String planId) {


//
//        stringBuffer.append("<div class=\"progress\">");
//        stringBuffer.append("<div class=\"progress-bar progress-bar-info\" role=\"progressbar\" aria-valuenow=\"60\"");
//        stringBuffer.append(" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: " + str + "%;\">");
//        // stringBuffer.append(" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 40%;\">");
//        stringBuffer.append("<span class=\"sr-only\">40% 完成</span> ");
//        stringBuffer.append("</div>");
//        stringBuffer.append(" </div>");
//        stringBuffer.append("");
//        stringBuffer.append("");


        int n = new Random().nextInt(100) + 1;
        String str = String.valueOf(n);//

        StringBuffer stringBuffer = new StringBuffer();

        stringBuffer.append("<small>当前进度:" + str + "%</small>");
        stringBuffer.append("<div class=\"progress progress-mini\">");
        stringBuffer.append("  <div style=\"width: " + str + "%;\" class=\"progress-bar\"></div>");
        stringBuffer.append("</div>");
        stringBuffer.append("");
        stringBuffer.append("");
        stringBuffer.append("");
        stringBuffer.append("");


        Map<String, Object> map = new HashMap<>();
        //
        map.put(planId, stringBuffer.toString());
        System.out.println("" + map);

        return map;

    }

-------js

var proKey = function (id, row, index) {

    $.ajax({
            url: "http://localhost:8080/web/plan/getProcess?planId=" + id,
            type: "get", //请求方式为POST
            // dataType:'text'
            //  data:{email:value},
            async: true,   //是否为异步请求
            // dataType: 'text',
            success: function (data) {
                //如果遍历map
                for (var key in data) {
                    if (data.hasOwnProperty(key)) {
                        if (key == id) {
                            var progress = data[key];//
                            sessionStorage.setItem(key, progress);
                            //通过key来获取value
                        }
                    }
                }
            },
            error: function (data) {
                // toastr.warning('请求失败!')
                toastr.error("请求失败!");
            }
        }
    );

}

/**
 * 进度格式化
 * @param value
 * @param row
 * @param index
 * @returns {string}
 */
var processFormatter = function (value, row, index) {

    var id = row.checkStockPlan.planId
    proKey(id, index);
    var process = sessionStorage.getItem(id);
    return process;


}

--表格

{
    title: "盘点进度",
    sortable: true,
    width: 100,//宽度
    formatter: processFormatter
},

进度从后台获取，异步加载