JSP数据分页导出下载显示进度条样式

1、思路

分页数据查询，同时缓存设置进度（为当前取出数据点总数据比例）

2、界面进度条 为 异步请求缓存比例

3、代码

css:

body{
position:relative;
}
.mask{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
background-color: #eee;
display:none;
filter:alpha(opacity=50); /*ie滤镜，透明度50%*/
-moz-opacity:0.5; /*firefox私有，透明度50%*/
opacity:0.9;/*其他，透明度50%*/
z-index:999;
}
.out{
margin:auto;
margin-top:20%;
text-align:center;
height:30px;
width:500px;
background-color: #fff;
border:1px solid red;
position:relative;
}
.in{
position:absolute;
left:-1px;
top:0px;
height:28px;
width:0px;
background-color: red;
}
.num{
position:absolute;
left:0px;
top:0px;
height:30px;
line-height:30px;
width:500px;
text-align:center;
position:relative;
}

js:

$(function(){
$(.donwload).click(function(){
var ulr = ----;
var key = new date().gettime();
url+="?key="+key;
downloadfile(url);
process(key);
});
});
function downloadfile(url) {
try{
var elemif = document.createelement("iframe")
elemif.style.display = "none";
document.body.appendchild(elemif);
elemif.src = url;
}catch(e){
}
}
function process(key){
$.ajax({
type: 'get',
url: ----------,
async:true,
success:function (data) {
if(data){
data = parsefloat(data).tofixed(2);
$(".in").css("width",(data/100*500)+"px");
$(".num").text(data+"%");
if(data >= 100){
settimeout(function(){
$(".mask").hide();
}, 3000);
}else{
settimeout(function(){
process(key);
}, 1000);
}
}
},
error:function () {
}
});
}

downaction

try{
redistemplate.opsforvalue().set("down_process_"+qm.getkey(),0.1);
int i = 0;
while(true){
qm.getpage().setnowpage(i++);
qm.getpage().setpagesize(100);
page dbpage = 取当前页数据
list<> list = (list<>) dbpage.getresult();
if(list != null && list.size() > 0){
if(list.size() < 100) {
redistemplate.opsforvalue().set("down_process_"+qm.getkey(), 100);
}else{
double process = i * 100.0 / dbpage.gettotalcount() * 100;
if(process < 0.1)process=0.1d;
redistemplate.opsforvalue().set("down_process_"+qm.getkey(), process);
}
}
logger.info("-------value:" + redistemplate.opsforvalue().get("down_process_"+qm.getkey()));
if(list == null || list.size() < 100) {
redistemplate.opsforvalue().set("down_process_"+qm.getkey(),100);
break;
}
logger.info("-------value:" + redistemplate.opsforvalue().get("down_process_"+qm.getkey()));
continue;
}
}catch(){
}finally{
redistemplate.opsforvalue().set("down_process_"+qm.getkey(),100);
redistemplate.expire("down_process_"+qm.getkey(),5, timeunit.minutes);
}
public double process(httpservletrequest request, httpservletresponse response,@pathvariable(value ="key") string key) throws ioexception {
double process = 0.1d;
try{
int i = 0;
while(true) {
if(i>=2){
process = 100d;
break;
}
i++;
if (redistemplate.opsforvalue().get("down_process_"+key) == null) {
thread.currentthread().sleep(1000l);
continue;
}else{
process = double.valueof(redistemplate.opsforvalue().get("down_process_"+key).tostring());
break;
}
}
}catch (exception e){
process = 0.1d;
e.printstacktrace();
}finally {
return process;
}
}

以上所述是小编给大家介绍的jsp数据分页导出下载显示进度条样式，希望对大家有所帮助