用ajax实现带标题,图片和自定义按钮的删除确认对话框
发布时间:2020-12-16 01:57:33 所属栏目:百科 来源:网络整理
导读:这种对话框一般用于页面列表的每条记录后面的功能按钮。 form表单如下: div class = "table_box" table class = "list tableBasic" width = "99%" border = "0" cellpadding = "8" cellspacing = "0" tbody tr th width = "" 短信类别 / th th width = "20%
这种对话框一般用于页面列表的每条记录后面的功能按钮。 <div class="table_box">
<table class="list tableBasic" width="99%" border="0" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<th width="">短信类别</th>
<th width="20%">操作</th>
</tr>
<c:forEach items="${smsTypes}" var="sms">
<tr>
<td ><span class="typename">${sms.type_name}</span>(${sms.smscount}</td>
//隐藏参数
<td style="display:none">${sms.id}</td>
<td id="tdstyle" align="center" style="text-indent: 0em;" >
<a href="${cxt}/smstype/edit?id=${sms.id}">重命名</a>
<a href="${cxt}/smstype/delete?id=${sms.id}" class="dialog-link-del">删
除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div id="dialog" title=''></div>
注意这里的删除按钮的class是”dialog-link-del”,另外,table外有一个div: <div id="dialog" title=''></div>
js的代码如下: $(function () {
var msgCateId;
$(".dialog-link-del").click(function(event){
var messageCategory = $(this).parent().parent().children('td').children('span').eq(0).text();
msgCateId = $(this).parent().parent().children('td').eq(1).text();
$( "#dialog" ).empty();
$( "#dialog" ).dialog( "open" );
event.preventDefault();
$(".ui-dialog-title").text("").prepend('<span><img src=/images/logo_stitle.png width=25 height=25>删除"'+messageCategory+'"</span>');
$("#dialog").append($("<p/>").text('"'+messageCategory+'"类短信将被全部删除,确定要删 除"'+messageCategory+'"?'));
});
// jquery ui 调用dialog() #dialog为弹出窗口ID
$( "#dialog" ).dialog({
autoOpen: false,width: 400,buttons: [
{
text: "确定",click: function() {
$( this ).dialog( "close" );
htmlobj=$.ajax({
type: "post",url: '${cxt}/smstype/delete',data:'id='+msgCateId,dataType: "text",success: function (data) {
var json = eval("("+data+")");
if('success'==json.result){
alert("删除成功!");
window.location.href='${cxt}/smstype/getSMSAllType? company_id='+json.companyId;
}else{
alert(json.result);
return false;
}
},error: function (XMLHttpRequest,textStatus,errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
},{
text: "取消",click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
注意:表单当条数据的取得方法: messageCategory = $(this).parent().parent().children('td').children('span').eq(0).text();
msgCateId = $(this).parent().parent().children('td').eq(1).text();
最后不要忘记引入相应的js和css: <link rel="StyleSheet"type="text/css" href="${cxt}/css/jquery-ui-1.10.4.css"/>
<script src="${cxt}/js/jquery.js" type="text/javascript" ></script>
<script src="${cxt}/js/jquery-ui-1.10.4.js" type="text/javascript" ></script>
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |