用ajax实现带标题，图片和自定义按钮的删除确认对话框

最新推荐文章于 2021-02-24 17:54:57 发布

木简韵

最新推荐文章于 2021-02-24 17:54:57 发布

阅读量1k

点赞数

分类专栏：技术

本文链接：https://blog.csdn.net/hmh123123hmh/article/details/46609821

版权

技术专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这种对话框一般用于页面列表的每条记录后面的功能按钮。
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>&nbsp;
                <a href="${cxt}/smstype/delete?id=${sms.id}"  class="dialog-link-del">删
                除</a>&nbsp; 
                </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>