layui 进度条（动态加载后台数据）

数据分发进度

思路：
1.后端：计算一次分发过程中，成功的数据量与分发总量的百分比，更新到session中
2.ajax调用方法获取session中的当前进度
3.layui展示

①　计算数据分发成功的百分比，存到session中

/**
 * 计算进度百分比存储到session中
 */

HttpSession session = request.getSession();
session.setAttribute("progress", ValueJudger.toPercent(count, list.size()));

/**
* 计算百分数
* @param count:分发成功数据量
* @param limit:分发总量
* @return
*/
public static String toPercent(int count, int limit) {
    if (count % limit == 0) {
        return count /limit * 100 + "%";
    }else {
        return (double)Math.round(count / (double)limit * 1000)/10 + "%";
    }
}

②　Ajax从session中取值

/**
 * @Description 数据分发百分比
 * @param request
 * @return
 * @throws Exception
 */
@RequestMapping(value = "/dispenseProgress")
@ResponseBody
public String getTreeProgress(HttpServletRequest request) throws Exception {
	return (String) request.getSession().getAttribute("progress");
}

③　HTML代码及JS

<div class="layui-progress layui-progress-big" lay-filter="progress" lay-showPercent="yes" >
    <div　id = "demo" class="layui-progress-bar layui-bg-green" lay-percent="10%" ></div>
</div>

layui.use('element', function(){
    var element = layui.element;
    var scanTime = 1000; //定义扫描时间
    var timer = setInterval(function (){ //进度条方法查看进度
        $.ajax({
	    url: dispenseProgress,
	    success: function (data) {
	        //动态设置百分比
	        var percent = data;
	        $('.layui-progress-bar').attr('lay-percent', percent);
	        element.init();
	        element.progress('progress', percent)
	        if(percent == "100%"){
	        clearInterval(timer); //进度到100%，注意关闭定时器
	        }
	    },
            error: function (e) {
	     	
            }
        });
    }, scanTime);
});

参考：https://blog.csdn.net/yangmaod/article/details/101059135