效果如图:
@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 },
进度从后台获取,异步加载