JS ajax 動態刪除表格行

CMS經常遇到這樣的操作：將一個表格的某行數據刪除，之前公司的CMS系統一直采用的是在一行中增加一列用來鏈接到另外一個地址，並傳入該行的標示列，在另外頁面中進行刪除，刪除成功后返回列表頁。

 

這樣可以實現效果，但是有一下兩個弊端：

1：增加了數據庫服務器查詢的次數。即在刪除成功后返回列表頁后，因為實際上是重新打開了列表頁，列表頁在加載時又進行了一次對數據庫的查詢。而這次查詢是毫無意義的。

2：用戶體驗不友好。點擊一次刪除，則刷新了一次頁面。

 

 

今天小豬就使用了Ajax 和js來實現頁面無刷新刪除數據。

大體思路是：js獲取需要刪除數據的標識Id，然后通過ajax傳入后台，后台進行對數據庫數據的刪除，成功則返回正確提示。ajax收到正確提示后把該行數據從表格中刪除。整個過程中沒有進行頁面的刷新。

 

首先：在對應的行的列中行樣式 remove方便查找該列jQuery對象。

<td class="delete remove">
       <a href="javascript:" url="Delete" name="@news.Id">[ X ]</a>
</td>

html代碼中，小豬增加了兩個屬性，分別是：url、name。是為了在后面的js代碼中獲取該列的數據對象。

 

js代碼如下：

$(".remove").live("click", function (e) {
//每個remove的都會綁定其點擊事件
    var thisE = $(e.currentTarget).parent();//獲取該行對象
    var ID = $(e.currentTarget).children("a").attr("name");//獲取id屬性
    var data = { id: ID };
    var beforesend = function(){
        console.log("before sending!");//ajax之前執行操作
    }
    var success = function (data) {//ajax執行成功的函數
            thisE.fadeOut();//頁面中該行隱藏
    }
   
    core.AJAX(data, action, beforesend, success)//ajax提交
})

此時配合對應的后台就可以實現了對該行數據的刪除。但是數據庫中的數據是需要在后台進行刪除操作的。

所以小豬對上述代碼進行了優化：即在后台返回了數據為success的時候才在頁面中刪除對應行。

 

$(".remove").live("click", function (e) {
 
    var thisE = $(e.currentTarget).parent();
    var ID = $(e.currentTarget).children("a").attr("name");
 
    var data = { id: ID };
    console.log("clicking!" + ID + ";url:" + action);
 
    var beforesend = function(){
        console.log("before sending!");
    }
 
    var success = function (data) {
        if (data == "success") {
            //只有后台返回的數據是success時候頁面才刪除
            thisE.fadeOut();
        } else if (data == "error") {
            //后台返回的是其他信息則不刪除
            console.log("some error!");
        } else {
            console.log("unknow exception!");
        }
    }
    core.AJAX(data, action, beforesend, success)
})

此時完成了先是從數據庫中刪除數據，刪除成功后告訴前台，然后前台把對應行從表格中fadeOut。

可是上述代碼的ajax代碼只能提交到html所在頁的地址，如果一行內有多種操作（徹底刪除、移到回收站等），那上述代碼就不夠了。所以小豬在一開始就在html代碼中預留了一個action屬性，指示數據要提交的地址。另外，小豬總覺得還是少了點什么，后來才知道是應該給用戶一個提示，形如給出個提示：操作成功了。

於是第三版代碼出爐了

$(".remove").live("click", function (e) {
 
    var thisE = $(e.currentTarget).parent();
    var ID = $(e.currentTarget).children("a").attr("name");
    var url = $(e.currentTarget).children("a").attr("url");
    var action = url == undefined ? "" : url;//提交地址
 
    var data = { id: ID };
    console.log("clicking!" + ID + ";url:" + action);
 
    var beforesend = function(){
        console.log("before sending!");
    }
 
    var alerttips = function (data) {
        $("#tips").css({ "display": "block", "opacity": "1" });
        $("#tips").animate({ opacity: 0 });
        $("#tips").html(data);
    }
    var success = function (data) {
        if (data == "success") {
            alerttips("操作成功！")//提示用戶操作成功
            thisE.fadeOut();
        } else if (data == "error") {
            console.log("some error!");
        } else {
            console.log("unknow exception!");
        }
    }
    core.AJAX(data, action, beforesend, success)
})

自此，功能就差不多了。小豬也開開心心的認為又跨進了前端大門一步。

后來才又發現了另外的bug，就是在用戶點擊對應的remove之后，該行會有一個消失的過程，如果用戶在消失的過程中重復點擊刪除。。那還是會有問題的。。。。

 

雖然是一個小的功能，但是需要考慮的東西真是多呀。。。。