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之后，该行会有一个消失的过程，如果用户在消失的过程中重复点击删除。。那还是会有问题的。。。。

虽然是一个小的功能，但是需要考虑的东西真是多呀。。。。