需求分析 & 运用场景:
由于请求列表内容 后台返回数据需要时间,所以加loading显示效果更好;
对列表项进行增加or删除,有弹窗提示成功or失败。
步骤:点击删除,加载列表再提示“删除成功”;点击添加,加载列表再提示“添加成功”。
这个时候就需要“回调函数”来调整弹窗显示顺序~
加载列表代码:
function getListData (id, callback) {
myDialog.myLoading('show');
var str = basepath + '/v1/group/query-hospital-list?groupId=' + id;
$.ajax({
url : str ,
type: "get",
data:"",
dataType : 'json',
contentType: 'application/json',
mimeType: 'application/json',
cache : false,
success : function(res) {
if (res.subCode == 'SUCCESS') {
var listStr = '';
if (res.data.length) {
listStr += '<colgroup>' +
'<col style="width: 200px;"></col>' +
'<col style="width: 300px;"></col>' +
'</colgroup>';
for (var i = 0; i < res.data.length; i++) {
listStr += ' <tr id="'+ res.data[i].id +'" class="'+ res.data[i].groupId +'">';
listStr += ' <td class="hospitalName">' + res.data[i].hospitalName + '</td>';
listStr += ' <td>'+ res.data[i].hospitalId +'</td>';
if (res.data[i].agreeState == 'WATING') {
listStr += ' <td>等待同意</td>';
} else if (res.data[i].agreeState == 'YES') {
listStr += ' <td>同意</td>';
} else if (res.data[i].agreeState == 'NO') {
listStr += ' <td>拒绝</td>';
} else {
listStr += ' <td></td>';
}
if (groupType == "MYGROUP") {
listStr += ' <td><span onclick="delMethod(this, \'hospital\')">删除</span></td>';
}
listStr += ' </tr>';
}
} else {
listStr += '<div class="listDataNone">暂无数据</div>';
}
$('.listData').empty().append(hospitalListStr);
myDialog.myLoading('hide');
/*********** 划重点 看这里 ***********/
typeof callback === "function" && callback();
/*这样写,在用到该函数不需要回调的时候也不会报错~*/
/*********** 划重点 看这里 ***********/
}
}
})
}
删除信息,再调用加载列表代码:
myDialog.myConfirm('确定要删除 <b>' + hospitalName + '</b> 医院吗?', function () {
var isDelStr = basepath + '/v1/group/delete-hospital?id=' + id
$.ajax({
url:isDelStr,
type:'put',
dataType:'json',
contentType:'application/json',
mimeType:'application/json',
success:function(res){
if (res.subCode == 'SUCCESS') {
/*********** 划重点 看这里 ***********/
getListData (groupId, function () {
myDialog.myAlert('删除成功',2000)
});
/*********** 划重点 看这里 ***********/
}
},
error:function(res){
console.log(res);
}
})
})
这里的myDialog.myLoading
、myDialog.myAlert
、myDialog.myConfirm
,是我自定义的方法,相关教程点击查看。
网友评论