EasyUI进度条 后台实时监控

最近写项目，有一个上传文件，批量导入的数据的功能。

但是由于数据量太多，保存到数据库会很慢，为了不让用户等的着急，所以，添加一个实时的进度条进行展示。

 

参考文章： EasyUI进度条 后台实时监控 

 

我这里并没有做demo，只是把原博主的东西搬运过来。稍微整理了一下格式。留作后期使用。

 

1.jsp

 

<div id="BgDiv"></div>
<div id="DialogDiv" style="display:none">
<div id="p" class="easyui-progressbar" style="width:400px;"></div>

 

 

 

2.css

 

#BgDiv{
	background-color:#D5EAEA; 
	position:absolute; 
	z-index:99; 
	left:0; 
	top:0; 
	display:none;
	width:100%; 
	height:1000px;
	opacity:0.5;
	filter: alpha(opacity=50);-moz-opacity: 0.5;
}
#DialogDiv{
	position:absolute;
	width:190px; 
	left:50%; 
	top:50%; 
	margin-left:-200px;
	height:18px; 
	z-index:100;
	border:0px #D5EAEA solid; 
	padding:1px;
}

 

 

 

3. js

 

//关闭考试
function closePlan(planIds){
      $.messager.confirm('确认关闭', '确定关闭所选考试?', function(r){
			if (r){
				$.ajax({
						cache: false,
						type: "get",//使用get方法访问后台
						dataType: "json",//返回json格式的数据
						url: "closePlan.action",//要访问的后台地址
						contentType: "application/x-www-form-urlencoded;charset=UTF-8",
						data: "planIds=" + planIds,//要发送的数据
						success: function(msg){//msg为返回的数据，在这里做数据绑定
							$.messager.alert('成功',msg,'warning');
							//成功后隐藏进度条 并且将进度条的值置成0 以免下次没刷新页面 直接再次执行时 value还是100 
							$("#DialogDiv").hide();

							$("#BgDiv").hide();
							$('#p').progressbar('setValue', 0);
							$('#tt').datagrid('reload');
						}
				});
				//调用
				start('DialogDiv',planIds);
		 }
	});
}



//方法详细：

function start(thisObjID,planIds){

	//这是遮罩层
	$("#BgDiv").css({ display: "block", height: $(document).height() });
	var yscroll = document.documentElement.scrollTop;
    $("#" + thisObjID ).css("top", "50%");
    $("#" + thisObjID ).css("display", "block");


	document.documentElement.scrollTop = 0;

	var value = $('#p').progressbar('getValue');
	if (value < 100){
		//后台传值过来
		$.ajax({
				cache: false,
				type: "post",//使用get方法访问后台
				dataType: "json",//返回json格式的数据
				url: "planPro.action",//要访问的后台地址
				contentType: "application/x-www-form-urlencoded;charset=UTF-8",
				data: "planIds=" + planIds,//要发送的数据
				success: function(msg){//msg为返回的数据，在这里做数据绑定
					value = msg;
					$('#p').progressbar('setValue', value);

					//如果没有达到100% 继续执行
					if(msg!=100){
						setTimeout(function(){
							start(thisObjID,planIds);
						}, 300); 
					}else{
						$("#DialogDiv").hide();
						$("#BgDiv").hide();
						$('#p').progressbar('setValue', 0);
					}
			}
		});
	}else{
		$("#DialogDiv").hide();
		$('#p').progressbar('setValue', 0);
		$("#BgDiv").hide();
	}
}

 

4. java

 

 

 

//方法1：执行的命令方法（只执行一次）

private static int SCORE_COUNT = 0;//执行过的数目

// 关闭选中考试
public String closePlan() {
	System.out.println("planIds--------" + planIds);
	SCORE_COUNT = 0;//执行过的数目 进来就置为0
	//得到批次下所有试题
	List<Script> sList = ss.queryByExamId(planIds);

	for (Iterator<Script> iterator = sList.iterator(); iterator.hasNext();) {
		Script name = (Script) iterator.next();
		if (name.getTypeCode().substring(0, 2).equals("EL")) {
			int score = ScoreUtil.ElScore(name,els);
			if (ss.updateScoreById(score, name.getId())) {
			SCORE_COUNT++;//每成功一次加1
		}
	} else if (name.getTypeCode().substring(0, 2).equals("ER")) {
		int score = ScoreUtil.ErScore(name,ers);
		if (ss.updateScoreById(score, name.getId())) {
		SCORE_COUNT++;//每成功一次加1
		}
	}
}

// 关闭
if(ps.closePlan(planIds)){
	msg = "success";
}else{
	msg = "error";
}
return msg;
}


//方法2：进度条监控方法（每次执行完成后 再执行 次数很多）


// 关闭考试 进度条
public String planPro() {
try {
	int total = ps.queryAllCount(planIds);//总的数目
	//int scoredCount = ps.queryScoredCount(planIds);
	//System.out.println("SCORE_COUNT:"+SCORE_COUNT+"total:"+total);
	float d = (((float)SCORE_COUNT)/((float)total))*100;
	msg = (int)d + "";
	if (msg.equals("100")) {//当达到100时，将SCORE_COUNT置为0 否则下次如果没有刷新页面而 关闭批次 SCORE_COUNT还是100
		SCORE_COUNT=0;
	}
	System.out.println("msg:"+msg);
	} catch (Exception e) {
		e.printStackTrace();
	}
	return SUCCESS;
}