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数据分页导出下载显示进度条样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！