jquery处理进度滚动条

最新推荐文章于 2021-12-15 19:17:50 发布

wlbing0625

最新推荐文章于 2021-12-15 19:17:50 发布

阅读量705

点赞数 1

分类专栏： java

本文链接：https://blog.csdn.net/wlbing0625/article/details/49861943

版权

java 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

项目中要用到导入excel,显示处理进度条，怎么实现呢？

我说下具体做法，欢迎批评指正。

1、第一步

后台插入数据库时，记录总的excel条数和处理了多少条。

统统把他们放在session中。

2、第二步利用jquery的progressbar组件（注意jquery版本，因为版本的不同，使用会有所不同，建议查看对应版本的api）

代码片段

 <style>
  .ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  </style>
  
<script type="text/javascript">
    var progressbar = $( "#progressbar" );
    var progressLabel = $( ".progress-label" );
	  progressbar.progressbar({
	  	 value: true,
	  	 change: function() {
	         progressLabel.text( progressbar.progressbar("option","value" ) + "%" );
	     },
	    complete: function() {
	         progressLabel.text( "完成！" );
	     }
    });
	
	function downloadAttResult() {
		document.location.href = "${_currConText }/attendanceResult/operate/downloadAttResult.action";
	}
	
	function process(){
		$.ajax({
			url:"${_currConText}/common/view/ajaxGetDealProcessStatus.action", 
			data:{ranNum:Math.random()},
			type:"post",
			dataType:"json", 
			success:function(data){
				 var val=parseInt(data.bfb);
		    	 progressbar.progressbar('option','value',val+1);
			     if(val>=99){
					  $("#import_button").attr("disabled",false);
				      document.getElementById("importClassIFrame_td").style.display="";
			     }else{
					  setTimeout(process,100);
			     }
			}
		});
	}
  	$("#import_button").click(function(){
 		document.getElementById("importClassIFrame_td").style.display="none";
  		var tag = 1;
		var str = "";
		var filename = document.getElementById("myFile").value;
		if (!filename) {
			str = str + "请选择要导入的文件!";
			tag = 0;
		} else {
			var arys = filename.split('.');
			var suffix = arys[arys.length - 1];
			var temp = "xls";
			if (suffix != temp) {
				str = str + "只能导入后缀.xls文件!";
				tag = 0;
			}
		}
		if (tag == 1) {
			  $("#form2").submit();//form提交耗时
		  	  $("#progressbar").show();
			  $("#import_button").attr("disabled",true);//按钮变灰，解决重复提交
			  setTimeout(process,1000);
		} else if (tag == 0) {
			alert(str);
			return false;
		}
  });
  	
  	
  	
  </script>