EasyUI添加进度条

添加进度条重点只有一个，如何合理安排进度刷新与异步调用逻辑，假如我们在javascript代码中通过ajax或者第三方框架dwr等对远程服务进行异步调用，实现进度条就需要做到以下三点：

• 在异步刷新之前打开进度条
• 异步刷新的过程中不断的刷新进度数据
• 异步刷新之后关闭进度条

详细代码

代码如下所示：

<div id="a" class="easyui-dialog" title="进度" data-options="modal:true,shadow:false,closable:false,closed:true,onClose:function(){$("#a").dialog('destroy');}" style="width:414px">

    <div id="progressbardemo" class="easyui-progressbar" style="width:400px"></div>

</div>

$('#div').load("/from/webapp/path/to/dialog.html",function(){

    $.parser.parse($(this));

    OpenDialogFunction();

});

//后面是正常的异步处理逻辑，只需要记住在异步调用返回结果成功时，关闭dialog即可

function OpenDialogFunction(){

    var control = $('#a');

    if(!control.length>0){

        //如果控件已经销毁，则退出该方法

        return;

    }

    var htmlobj = $.ajax({

      url:"xxxxxxxxxxx",  //获取进度数据的url

      async: false  //保持同步

    });

    var responseText = htmlobj.responseText;

    var result = eval('(' + responseText + ')');

    if(!result.process_code){

      //该代码用于判断返回的信息有错误时如何处理

      return;

    }

    var processNumber = result.progressNumber;

    if(processNumber == 0){

      control.progressbar('options').text = "用于控制进度条中的文字a";

    }else{

      control.progressbar('options').text = "用于控制进度条中的文字b";

    }

    var currentProgressValue = control.progressbar('getValue');

    if(currentProgressValue < 100){

      control.progressbar('setValue',processNumber);

      setTimeout(arguments.callee,100);  //回调该方法

    }

}

注意重点

• setTimeout：该方法会间隔一段时间进行调用，具体原理还有待进一步研究。在进度条的实例中主要利用这个方法进行固定时间间隔的回调，刷新进度条的progressValue
• $('#div').load("/from/webapp/path/to/dialog.html", function () { $.parser.parse($(this)); ().dialog('open')})：使用该形式处理dialog可以有效避免easyUi出现问题，关闭的时候就销毁，打开的时候就重新创建html元素
• 判断控件是否存在：单纯的判断$('#id')是否为空是不行的，不论控件是否存在都会返回元素，所以需要使用 control.length>0来判断控件存在
• 实时获取进度号使用同步：因为这个过程涉及到先后关系，所以必须拿到对象后才能将value赋值给progressBar，所以ajax选择async:false同步