这种对话框一般用于页面列表的每条记录后面的功能按钮。
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%">操作</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>