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同步