使用sweetalert彈出操作框套件搭配ajax進行php+mysql的資料刪除操作(Xoops方法)

sweetalert是一個非常好用的jQuery警示方框操作套件，用來取代jQuery原生的alert()方法，sweetalert官網中有非常多的樣式及參數可以使用，有興趣的朋友可以參考看看：

sweetalert官網：http://mishengqiang.com/sweetalert/

本教學主要是以【確認刪除】與【取消刪除】這樣式為範例，加上ajax的刪除資料庫語法操作，達成實際刪除資料表欄位的功能，方法如下：

1、需於檔頭<head></head>引入以下兩支檔案



<script src="dist/sweetalert.min.js"></script>

<link rel="stylesheet" href="dist/sweetalert.css">

//如果佈景本身沒有引入jquery.js檔，則需要於最頂端再引入jquery-2.1.3.min.js，

若佈景本身已有引入jquery.js則不用再加上以下這段引入

PHP部分

CODE略..................

$i=0; //建立$i值並針對迴圈+1。

//資料

$sql = "select * from " . $xoopsDB->prefix('neilhonorarymatters') . " order by honor_id DESC";

$result = $xoopsDB -> query($sql) or die($sql) ;

while(list($honor_id,$honor_idsort) = $xoopsDB -> fetchRow($result)){

$honor.="

<tr class='t{$i}'>

<td>{$honor_idsort}</td>

<td><a href='{$xoopsurl}/modules/neilhonorlist/admin/honoridsort.php?honor_id={$honor_id}'>{$honoradmin1}</a>|<a class='honordle' id='slowdivbotton{$i}' mane='honor_id={$honor_id}' href='#no'>{$honoradmin2}</a></td>
</tr>
";

$i++;

}
//id='slowdivbotton{$i}' 會按照迴圈自動產生 id='slowdivbotton0',id='slowdivbotton1'等按鈕的id值.....

CODE略..................

JS部分

於頁腳或是JS檔中建立以下的sweetalert->code

$xoopsurl=XOOPS_URL;

<script>var xoopsjsurl='{$xoopsurl}';</script> //傳入Xoops路徑

<script>

$(document).ready(function(){

$(".honordle").each(function(index) { //each所有class='honordle'的元件，並產生index值(0.1.2.3)

$("#slowdivbotton"+index+"").click(function() {

//#slowdivbotton加上index就會是#slowdivbotton0,#slowdivbotton1,#slowdivbotton2，與PHP檔案中的按鈕ID一致

$honor_id=$("#slowdivbotton"+index+"").attr("mane"); //取得#slowdivbotton+index+的mane數值。

swal({

title: "您確定要刪除嗎？",

text: "您確定要刪除這筆資料？",

type: "warning",

showCancelButton: true,

closeOnConfirm: false,

confirmButtonText: "是的，我要刪除",

cancelButtonText: "取消刪除！",

confirmButtonColor: "#ec6c62"

},

function(isConfirm){

if (isConfirm) {

$.ajax({

url: xoopsjsurl+'/modules/neilhonorlist/ajax.php', //ajax引入檔

type: 'POST',

data: { id: '1',honor_id: $honor_id}, //傳入兩個數值到/ajax檔案中

}).done(function(data) {

swal("操作成功!", "已成功刪除資料！", "success");

getMyArtic(); //更新頁面函示

}).error(function(data) {

swal("OMG", "刪除操作失敗了！", "error");

});

} else {

swal("取消！", "你的資料是安全的:)",

"error");

}

function getMyArtic(){ //刪除元素

$(this).click(function() {

// location.reload()

$t=$(".t"+index+"");

$t.remove();

});

}

});

});

});

});

</script>

ajax部分

<?php

include "../../mainfile.php"; //注意路徑，不要引入錯誤，不然$xoopsDB無法正常使用

global $xoopsDB;

$id=(empty($_REQUEST['id']))?"":$_REQUEST['id']; //接收js傳過來的變數

$honor_id=(empty($_REQUEST['honor_id']))?"":$_REQUEST['honor_id']; //接收js傳過來的變數

if($id==1){ //如果$id等於1就進行以下的刪除資料表語法

$selectdb=$xoopsDB->prefix('neilhonorarymatters');

$sql = "delete from " . $selectdb. " where {$honor_id}";

$xoopsDB->queryF($sql);

}

exit;

?>

這樣就完成了阿，實際來操作看看!!目前的表單共有5個項目條列

刪除【榮譽事項05】看看。

點了刪除後，果然彈出警示方框

點選【是的，我要刪除】，顯示操作成功的介面

點選ok，警示框自動消失，【榮譽事項05】也以已經刪除不見了，只剩下4筆資料條列，確認刪除功能是沒問題的。

若是點選取消刪除則資料將不會被刪除，更多的參數資料可以去sweetalert官網查看喔。

教學撰寫：徐嘉裕 Neil hsu

徐嘉裕(Neil Hsu)的工作心得網誌!

搜尋此網誌