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之后,该行会有一个消失的过程,如果用户在消失的过程中重复点击删除。。那还是会有问题的。。。。
虽然是一个小的功能,但是需要考虑的东西真是多呀。。。。