文章中进度条用到了easyUI的$.messager.progress控件,这里主要讲述进度条实时显示进度的实现。
要实现功能如下:
点击发送短信按钮,然后在进度条中实时显示发送进度。另外还实现了重发发送失败的短信
实现原理如下:
首先向服务器发起一个请求,这个请求主要是用来进行短信的发送,在服务器端记录下已发送的短信条数,然后客户端每隔一段时间去请求这个记录已经发送短信条数的变量,这样就可以把这个变量实时的反馈到进度条上了。
实现代码:
用于处理进度条的函数:
function setSendSMSProgress(phoneLength,progressBar){
return function(){
$.ajax({
url:_rootPath + 'api/sms/GetSentSMSCount',
type:'GET',
beforeSend:function(){
},
success:function(data){
if(parseInt(data) <= phoneLength){
var value = parseInt(parseInt(data) / phoneLength * 100);
progressBar.progressbar('setValue',value);
}else{
//alert("发送完毕");
}
},
error:function(){
console.log('error');
}
})
}
}
function sendSMS(phones,content){
var me = arguments.callee;
if (phones.length == 0 || content.trim() == "") {
$.messager.alert('提醒','请选择党员并输入内容!');
//alert('请选择党员并输入内容!');
} else {
var intervalId = null;
var progressBar = null;
var options = {
type: 'post',
contentType: 'application/json',
dataType: 'json',
url: _rootPath + 'api/sms/PutSendSMS',
data: JSON.stringify({
content: content,
phones: phones
}),
beforeSend:function(){
var phoneLength = phones.length;
$.messager.progress({
title:'请稍后',
msg:'正在发送短信......',
interval:0
});
progressBar = $.messager.progress('bar');
intervalId = setInterval(setSendSMSProgress(phoneLength,progressBar),500);
},
complete:function(){
clearInterval(intervalId);
if(progressBar != null){
progressBar.progressbar("setValue",100);
}
setTimeout(function(){
$.messager.progress('close');
},800)
},
success: function(data) {
var failArr = [];
var successArr = [];
for(var i = 0 ; i < data.length; i++){
if(data[i] != '1100'){
failArr.push(data[i]);
}else{
successArr.push(data[i]);
}
}
if(failArr.length === 0){
setTimeout(function(){
$.messager.alert('消息','短信发送成功');
},500);
$('#member_msg_dlg').dialog('close');
}else{
setTimeout(function(){
$.messager.confirm('消息', '成功'+ successArr.length + '条,失败' +failArr.length+'条,重新发送失败短信?', function(ok){
if (ok){
me(failArr,content);
}else{
$('#member_msg_dlg').dialog('close');
}
});
},500)
}
},
error: function(data) {
alert('发送失败');
},
};
$.ajax(options);
}
}