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;
}