ajax大数据排队导出+进度条

描述 ：我们现在有很多数据，分表存放，现在需要有精度条的导出。最后面有完整源码。

效果图：

点击导出，实现

点击导出

统计完成之后

点击确定

前面导出操作简单，从第二个导出操作开始：

点击"确定"调用exportCsv函数

<a class="on" href="javascript:exportCsv();"><em>导出</em></a>

exportCvs函数如下 
function exportCsv()
{

　//清除等待的转动圈
    $(‘#loading‘).html(‘‘);

//弹出统计总数对话框，函数在后面给出定义
    tip();

//ajax请求总数
    $.post("<?php echo WEB_URL;?>/index.php?q=onlinesea/getwherecount"+search_uri, function(json){
        var return_arr = eval(‘(‘ + json + ‘)‘);
        var num = return_arr[‘total‘];
        var processnum = return_arr[‘processnum‘];

if(num == 0){
            poptip.title(‘系统消息‘);
            poptip.content(‘查询结果为空，不能进行数据导出‘);
        }
        else
        {
            poptip.close();
            
            for (var i in return_arr[‘cntarr‘]){
                if (return_arr[‘cntarr‘][i] != 0){
                    count_arr[i] = return_arr[‘cntarr‘][i];
                }
                
            }
            var ii=0;
            for (var i in count_arr){
                  type_arr[ii]=i;
                  ii++;
            }

　　//当数据不为空的时候弹出是否到处框
            exportCsvConfirm(num, processnum);
        }
    });
}

//弹出确认下载  exportCsvConfirm函数

function exportCsvConfirm(num, processnum)
{
    var msg = ‘需要导出的数据有 <span style="color: red">‘ + num + ‘</span> 行，可能会占用您较多时间来进行导出。<br />您还需要继续吗？‘;

// 提示是否继续
    $.dialog.confirm(msg, function () {
        $(‘#loading‘).html(‘‘);
        processed_count = 0;
        index = 1;
        win.$(‘#process_bg‘).hide().width(‘0%‘).show();
        win.$(‘#process_num‘).html(‘0‘);

$.dialog.through({
            title: ‘数据导出进度‘,
            content: win.document.getElementById(‘processbar‘),
            lock: true,
            opacity: ‘.1‘
        },
        function(){
                window.location.reload();
        });
       //当继续的时候
        win.$(‘#progress_info‘).show().text(‘正在导出数据，请耐心等待，请勿关闭窗口...‘);
      //开始执行导出操作
        excel_export2(num, processnum);
    });
}

关键函数excel_export2队列请求，首先会在前面定义全局变量
var search_uri = "<?php echo $uri;?>";
var event = "<?php echo $event;?>";
var processed_count = 0;    // 已处理的数据条数
var index = 1;
var iii   = 0;
var ajaxmark = 1;
var win = $.dialog.parent;    // 顶层页面window对象
var count_arr = new Array(<?php echo count($this->tables);?>);
var type_arr = new Array();

我们要定义全局变量  index   和iii ，ajaxmark  ,index主要用于对一个表数据太多的时候进行分批导出 ，iii用来控制队列循环，ajaxmark用来判断前一个请求是否执行成功了，成功的话在执行下面的请求

function excel_export2(num, processnum){
      //获取tabletype
      tabletype=type_arr[iii];

//获取总数
      num = count_arr[tabletype];

//判断是否数组是否执行完毕
      if(typeof(tabletype)==‘undefined‘&&typeof(num)==‘undefined‘){
            return false;
      }

//判断是否有上一个ajax请求是否完成
      if(ajaxmark==1){

index = 1;
           //将ajax请求标记为未执行完成

　　　　ajaxmark=2;

//执行ajax请求，函数在后面给出
            retrun_var = excel_export_ajax(index, num, processnum, tabletype);
            //判断函数返回
            if(typeof(retrun_var)==‘undefined‘){

　　　　　　//将iii自增，执行下一个数组数据
                  iii++;

　　　　　　//递归调用自己
                  excel_export2(num, processnum);
                  if(iii>100){
                        return false;
                  }

　　　　//当ajax返回成功的时候，返回。
            }else if(retrun_var==‘success‘){
                  return false;
            }
            return false;
      }else{
            //setTimeout(excel_export2(num, processnum),3000);
            //setInterval(_excel_export2(num, processnum),3000);

　　　　//每隔3秒检查是否ajax请求结束，这里settimeout 不能传递参数，只能通过_excel_export2这种形式
            setTimeout(_excel_export2(num, processnum),3000);
      }
}

function _excel_export2(num, processnum){
       return function(){
             excel_export2(num, processnum);
       }
}

//excel_export_ajax函数  执行导出
/* AJAX，递归调用 */
function excel_export_ajax(index, num, processnum, tabletype)
{
    $.ajax({
        url: "<?php echo WEB_URL;?>/index.php?q=onlinesea/exportcsv"+search_uri+"/index/"+index+ "/total/" + num + ‘/tabletype/‘ + tabletype,
        type: ‘GET‘,
        success: function(data)
        {

　　　　//执行次数自增
            ++processed_count;

　　　　//当一个表数据太多，分批导出
            ++index;
            // 更新进度条
　　　　//判断进度
            var process_num = parseInt((processed_count / processnum) * 100);
　　　　
            if (process_num >= 100)
            {
                process_num = 100;
            }

　　　　//跟新进度条
            update_process(process_num);
            //alert(processed_count+‘--‘+processnum);

　　　　//当执行结束
            if (processed_count >= processnum)
            {

　　　　　　//压缩文件
                backup_compress();

return ‘success‘;
            }
            if (data == ‘0‘){

　　　　　　//将ajax请求标记为执行完毕，执行下一个url请求
                ajaxmark=1;
                return false;
            }
            当一个表的数据未导出完成的时候，会循环调用自己去请求， php函数或判断是否到处完成，导出完成返回0  ，未完成返回1
            excel_export_ajax(index, num, processnum, tabletype);
        }
    });
}

/* 备份文件执行压缩 */
function backup_compress()
{
    win.$(‘#progress_info‘).text(‘正在生成压缩文件...‘);

$.ajax({
        url: "<?php echo WEB_URL;?>/index.php?q=onlinesea/compress/event/<?php echo $event;?>",
        success: function(msg){
            win.$(‘#process_bg‘).show().width(‘100%‘);
            win.$(‘#process_num‘).html(‘100‘);
            win.$(‘#progress_info‘).html(‘导出数据完成。&nbsp;&nbsp;<a href="‘ + msg + ‘" style="color: #006699; text-decoration: underline">下载文件</a>‘);
        }
    });
}

/* 更新进度条 */
function update_process(process_num)
{
    win.$(‘#process_bg‘).show().width(process_num + ‘%‘);
    win.$(‘#process_num‘).html(process_num);
}

////////////////////////////////////////////////////////////////////////////////////////////////完整代码如下

<script type="text/javascript" language="javascript">
var search_uri = "<?php echo $uri;?>";
var event = "<?php echo $event;?>";
var processed_count = 0;    // 已处理的数据条数
var index = 1;
var iii   = 0;
var ajaxmark = 1;
var win = $.dialog.parent;    // 顶层页面window对象
var count_arr = new Array(<?php echo count($this->tables);?>);
var type_arr = new Array();
function exportCsv()
{
    $(‘#loading‘).html(‘‘);
    tip();
    $.post("<?php echo WEB_URL;?>/index.php?q=onlinesea/getwherecount"+search_uri, function(json){
        var return_arr = eval(‘(‘ + json + ‘)‘);
        var num = return_arr[‘total‘];
        var processnum = return_arr[‘processnum‘];

if(num == 0){
            poptip.title(‘系统消息‘);
            poptip.content(‘查询结果为空，不能进行数据导出‘);
        }
        else
        {
            poptip.close();
            
            for (var i in return_arr[‘cntarr‘]){
                if (return_arr[‘cntarr‘][i] != 0){
                    count_arr[i] = return_arr[‘cntarr‘][i];
                }
                
            }
            var ii=0;
            for (var i in count_arr){
                  type_arr[ii]=i;
                  ii++;
            }
            exportCsvConfirm(num, processnum);
        }
    });
}

function exportCsvConfirm(num, processnum)
{
    var msg = ‘需要导出的数据有 <span style="color: red">‘ + num + ‘</span> 行，可能会占用您较多时间来进行导出。<br />您还需要继续吗？‘;
    $.dialog.confirm(msg, function () {
        $(‘#loading‘).html(‘‘);
        processed_count = 0;
        index = 1;
        win.$(‘#process_bg‘).hide().width(‘0%‘).show();
        win.$(‘#process_num‘).html(‘0‘);

$.dialog.through({
            title: ‘数据导出进度‘,
            content: win.document.getElementById(‘processbar‘),
            lock: true,
            opacity: ‘.1‘
        },
        function(){
                window.location.reload();
        });

win.$(‘#progress_info‘).show().text(‘正在导出数据，请耐心等待，请勿关闭窗口...‘);

excel_export2(num, processnum);
    });
}

function excel_export2(num, processnum){

tabletype=type_arr[iii];
      num = count_arr[tabletype];
      if(typeof(tabletype)==‘undefined‘&&typeof(num)==‘undefined‘){
            return false;
      }
      if(ajaxmark==1){

index = 1;
            ajaxmark=2;
            retrun_var = excel_export_ajax(index, num, processnum, tabletype);
            
            if(typeof(retrun_var)==‘undefined‘){            
                  iii++;
                  excel_export2(num, processnum);
                  if(iii>100){
                        return false;
                  }
            }else if(retrun_var==‘success‘){
                  return false;
            }
            return false;
      }else{
            //setTimeout(excel_export2(num, processnum),3000);
            //setInterval(_excel_export2(num, processnum),3000);
            setTimeout(_excel_export2(num, processnum),3000);
      }
}
function _excel_export2(num, processnum){
       return function(){
             excel_export2(num, processnum);
       }
}
/* 执行导出 */
function excel_export(num, processnum){
    var retrun_var = ‘ss‘;
    for (var i in count_arr){
        num = count_arr[i];
        tabletype = i;
        index = 1;
        retrun_var = excel_export_ajax(index, num, processnum, tabletype);
        
        if(typeof(retrun_var)==‘undefined‘){
            //alert(‘xxxx‘);
            setTimeout(function(){exit;},5000);
        }
        if (retrun_var == ‘success‘)
        {
            return false;
        }
    }
    
    return false;
}

/* AJAX，递归调用 */
function excel_export_ajax(index, num, processnum, tabletype)
{
    $.ajax({
        url: "<?php echo WEB_URL;?>/index.php?q=onlinesea/exportcsv"+search_uri+"/index/"+index+ "/total/" + num + ‘/tabletype/‘ + tabletype,
        type: ‘GET‘,
        success: function(data)
        {
            ++processed_count;
            ++index;
            // 更新进度条

var process_num = parseInt((processed_count / processnum) * 100);

if (process_num >= 100)
            {
                process_num = 100;
            }
            update_process(process_num);
            //alert(processed_count+‘--‘+processnum);
            if (processed_count >= processnum)
            {
                backup_compress();

return ‘success‘;
            }
            if (data == ‘0‘){
                ajaxmark=1;
                return false;
            }
            
            excel_export_ajax(index, num, processnum, tabletype);
        }
    });
}

/* 更新进度条 */
function update_process(process_num)
{
    win.$(‘#process_bg‘).show().width(process_num + ‘%‘);
    win.$(‘#process_num‘).html(process_num);
}

/* 备份文件执行压缩 */
function backup_compress()
{
    win.$(‘#progress_info‘).text(‘正在生成压缩文件...‘);

$.ajax({
        url: "<?php echo WEB_URL;?>/index.php?q=onlinesea/compress/event/<?php echo $event;?>",
        success: function(msg){
            win.$(‘#process_bg‘).show().width(‘100%‘);
            win.$(‘#process_num‘).html(‘100‘);
            win.$(‘#progress_info‘).html(‘导出数据完成。&nbsp;&nbsp;<a href="‘ + msg + ‘" style="color: #006699; text-decoration: underline">下载文件</a>‘);
        }
    });
}
function tip()
{
    poptip = $.dialog.through({
        id: ‘tip‘,
        title: ‘系统消息‘,
        content: ‘正在统计总数，请勿关闭窗口&nbsp;&nbsp;<img src="http://images.cnblogs.com/loading_s.gif" />‘,
        width: 300,
        height: 100,
        icon: ‘system‘,
        lock: true,
        opacity: .1
    },
    function(){
        window.location.reload();
    });

poptip.show();
}

function packetDelete(url,msg)
{
    $.dialog.confirm(msg, function () {
        $.post(url, function(data){
          if(data == ‘1‘){
              $.dialog(‘删除成功‘, function(){window.location.reload();});
          }
          else if(data == ‘2‘){
            $.dialog(‘删除失败‘, function(){window.location.reload();});
          }
          else if(data == ‘3‘){
            $.dialog(‘文件不存在，或者已删除‘, function(){window.location.reload();});
          }
      });
     });
}
</script>

ajax大数据排队导出+进度条由源码搜藏网整理,转载请注明出处http://www.codesocang.com/jiaocheng/php/8124.html

ajax大数据排队导出+进度条

时间： 2024-08-19 13:34:05

ajax大数据排队导出+进度条的相关文章

php使用fputcsv进行大数据的导出

为了实验大数据的导出,我们这里先自已创建一张大表,表结构如下: CREATE TABLE `tb_users` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '用户ID', `name` varchar(32) DEFAULT '' COMMENT '用户名', `age` tinyint(3) DEFAULT '0' COMMENT '用户年龄', `desc` varchar(255) DEFAULT '' COMMENT '

数据导出进度条

思路: 1.获得导出数据,统计数据总量 ( 文件搜索条件a,b,c等: 分页条件 a.起始页 b.偏移量 c.每页数据量): 2.将数据集A组装成需要下载的文件B (文件路径,缓存路径):后台接口 统计总量和总页数 将数据集进行组装到服务器下的存贮位置,开启一个新的线程.将数据组装进程(的进度)写入redis缓存,通过定时任务不断从缓存中读取数据,页面展现为下载的进度条. 3.下载B文件到本地(本地路径):(进度条读取到100%,开始执行下载导出) 原文地址:https://www.cnblog

项目一、ajax上传数据（显示进度条）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导入数据</title> <script type="text/javascript" src="/webapp/javascript/jquery.min.js"></script> <

Extjs+Asp.net实现上传大文件带实时进度条

主要是为了记录自己的学习过程,整理自己的思路以便以后的学习. 首先先说一下整体的思路. 我门都知道,asp自带的上传文件是先将上传的文件整个读取到内存然后在写入磁盘的.如果文件很大的话,上传时就会出现页面停滞,没有任何反映.用户根本不知道页面在做什么,也不知道是否在上传,上传了多少?这样的用户体验是很差的. 所以我门需要实现一个进度条来反映文件上传的进度,可以反映文件写入的进度.具体的思路是通过asp.net提供的HttpModule(Http模块)中的init方法内订阅各种应用程序事件(如Be

数据抓取进度条

网页版数据抓取,没有抓取进度提示,对用户不友好,因此考虑添加进度条,进度为伪进度. css代码如下 1 <style type="text/css"> 2 .demo{ 3 padding: 2em 0; 4 background: linear-gradient(to right, #2c3b4e, #4a688a, #2c3b4e); 5 } 6 .progress{ 7 height: 25px; 8 background: #262626; 9 padding: 5

ajax大数据导入的一系列问题处理

介绍:就是想实现简单的ajax上传数据,但是当数据量较大的时候,问题就一个一个接着来了,其实数据也不是很大,就是csv格式数据 不到5w条数据.大小5M,一开始认为这个很简单,就是先上传一下文件,然后读取一下,存到数据库就好了,结果,可能我比较菜,弄了半天做出这个功能.环境是linux. 遇到的问题就从先到后的一一说吧. 问题1 按照我最初的想法,先上传文件再读取文件.这里问题就来了,当文件较大的时候上传较慢,导致客户看到的操作一直处于等待状态,不人性化. 处理办法:我是这样做的,大神有更好的办

ajax上传文件带进度条的思路

首先,需要2个重要的数据,total(文件总大小)和loaded(已经上传的大小),用 loaded/total,然后不断的更新进度条即可: 问:怎么拿到这两个重要数据呢? 答:在html5中有一个上传过程事件onprogress,在这个事件中可以读到这两个数据loaded和total:上传的时候不断的触发这个函数,然后更新进度条即可: 1 xhr.upload.onprogress = function(ev){ 2 if(ev.lengthComputable){ 3 //有可能文件时分块上

WinForm中异步加载数据并使用进度条

在WinForm程序中,有时会因为加载大量数据导致UI界面假死,这种情况对于用户来说是非常不友好的.因此,在加载大量数据的情况下,首先应该将数据加载放在另一线程中进行,这样保证了UI界面的响应:其次可以提供一个进度条使用户明白程序正在加载数据,同时清楚知道目前加载的进度. 实现上述功能的一个简单的方式是利用 System.ComponentModel 中的工具类:BackgroundWorker,它支持取消,进度报告,异常转发,并且实现了 IComponent 接口,意味着可以直接在VS设计器中

同步数据，通过进度条

1 using BO; 2 using System; 3 using System.Collections.Generic; 4 using System.ComponentModel; 5 using System.Configuration; 6 using System.Data; 7 using System.Drawing; 8 using System.IO; 9 using System.Linq; 10 using System.Net; 11 using System.Tex