Explore the idea of ​​​​php+ajax to implement big data queuing and export with progress bar

Without further ado, here are the renderings:

Click export to realize

Click to export

After the statistics are completed

##Click OK

Let’s talk about the implementation ideas:

The previous export operation is simple, starting from the second export operation:

Click "OK" to call the exportCsv function

The code is as follows:

<a class="on" href="javascript:exportCsv();"><em>导出</em></a>
exportCvs函数如下
function exportCsv()
{
　//清除等待的转动圈
    $(&#39;#loading&#39;).html(&#39;&#39;);
 //弹出统计总数对话框，函数在后面给出定义
    tip();
//ajax请求总数
    $.post("<?php echo WEB_URL;?>/index.php?q=onlinesea/getwherecount"+search_uri, function(json){
        var return_arr = eval(&#39;(&#39; + json + &#39;)&#39;);
        var num = return_arr[&#39;total&#39;];
        var processnum = return_arr[&#39;processnum&#39;];
        if(num == 0){
            poptip.title(&#39;系统消息&#39;);
            poptip.content(&#39;查询结果为空，不能进行数据导出&#39;);
        }
        else
        {
            poptip.close();
            for (var i in return_arr[&#39;cntarr&#39;]){
                if (return_arr[&#39;cntarr&#39;][i] != 0){
                    count_arr[i] = return_arr[&#39;cntarr&#39;][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 = &#39;需要导出的数据有 <span style="color: red">&#39; + num + &#39;</span> 行，可能会占用您较多时间来进行导出。<br />您还需要继续吗？&#39;;
   // 提示是否继续
    $.dialog.confirm(msg, function () {
        $(&#39;#loading&#39;).html(&#39;&#39;);
        processed_count = 0;
        index = 1;
        win.$(&#39;#process_bg&#39;).hide().width(&#39;0%&#39;).show();
        win.$(&#39;#process_num&#39;).html(&#39;0&#39;);
        $.dialog.through({
            title: &#39;数据导出进度&#39;,
            content: win.document.getElementById(&#39;processbar&#39;),
            lock: true,
            opacity: &#39;.1&#39;
        },
        function(){
                window.location.reload();
        });
       //当继续的时候
        win.$(&#39;#progress_info&#39;).show().text(&#39;正在导出数据，请耐心等待，请勿关闭窗口...&#39;);
      //开始执行导出操作
        excel_export2(num, processnum);
    });
}

The key function excel_export2 queue request will first define the global variable in front.

The code is as follows:

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();

We need to define the global variables index and iii, ajaxmark, index is mainly used to export in batches when there is too much data in a table, iii is used to control the queue cycle, ajaxmark is used to determine whether the previous request was executed successfully, and if successful, execute the following request

The code is as follows:

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 + &#39;/tabletype/&#39; + tabletype,
        type: &#39;GET&#39;,
        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+&#39;--&#39;+processnum);
　　　　//当执行结束
            if (processed_count >= processnum)
            {
　　　　　　//压缩文件
                backup_compress();
                return &#39;success&#39;;
            }
            if (data == &#39;0&#39;){
　　　　　　//将ajax请求标记为执行完毕，执行下一个url请求
                ajaxmark=1;
                return false;
            }
            当一个表的数据未导出完成的时候，会循环调用自己去请求， php函数或判断是否到处完成，导出完成返回0  ，未完成返回1
            excel_export_ajax(index, num, processnum, tabletype);
        }
    });
}
/* 备份文件执行压缩 */
function backup_compress()
{
    win.$(&#39;#progress_info&#39;).text(&#39;正在生成压缩文件...&#39;);
    $.ajax({
        url: "<?php echo WEB_URL;?>/index.php?q=onlinesea/compress/event/<?php echo $event;?>",
        success: function(msg){
            win.$(&#39;#process_bg&#39;).show().width(&#39;100%&#39;);
            win.$(&#39;#process_num&#39;).html(&#39;100&#39;);
            win.$(&#39;#progress_info&#39;).html(&#39;导出数据完成。  <a href="&#39; + msg + &#39;" style="color: #006699; text-decoration: underline">下载文件</a>&#39;);
        }
    });
}
/* 更新进度条 */
function update_process(process_num)
{
    win.$(&#39;#process_bg&#39;).show().width(process_num + &#39;%&#39;);
    win.$(&#39;#process_num&#39;).html(process_num);
}

The source code is attached below. Let’s make up the relevant php programs by yourself.

The code is as follows:

Related learning Recommended:

PHP programming from entry to proficiency

The above is the detailed content of Explore the idea of ​​​​php+ajax to implement big data queuing and export with progress bar. For more information, please follow other related articles on the PHP Chinese website!