EasyUI添加进度条

Posted 2021-02-12 mrnx2004

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"：使用该形式处理dialog可以有效避免easyUi出现问题，关闭的时候就销毁，打开的时候就重新创建html元素
• 判断控件是否存在：单纯的判断$(‘#id‘)是否为空是不行的，不论控件是否存在都会返回元素，所以需要使用 control.length>0来判断控件存在