通过a连接方式删除数据的确认删除效果的实现

标题可能说的有点绕,场景是我们经常会有一些数据列表,数据会有删除的操作,很多的时候,我们的删除是通过a连接的方式实现的,通过a传递一个id值之类的主键,比如我这里有一个示例:


我这里的删除操作,是通过a连接传递给路由,带有该条数据的id来实现的。

实现删除的操作不难实现,获取到了id值,执行相应的sql语句就可以了,但功能完成后总觉着少了点什么。对了,就是数据直接删除了,有的时候我们并不是想删除这条数据,而是由于操作疏忽,误点了删除按钮,如果这个时候我们添加一步确认的操作,用户体验就会更好了,也能更好的保护我们的数据。

想到了方案后,就直接实现吧,暂时不考虑界面的美观,就直接使用js原生的confirm吧。confirm是一个确认弹窗,有一个取消和确认的操作,相应的该操作有一个返回值,点击了取消,返回值为false,点击了确认,返回值为true。了解到这里就可以了,就满足我们的需求了,在点击按钮的时候,添加一步操作,弹出确认弹窗,然后根据确认弹窗操作的返回值来确定是否要删除数据。直接来上代码:

$(".btn-del").click(function(e){
    var confirmResult = confirm("确认要删除吗?");
    if(!confirmResult){
      e.preventDefault();
    }
  });
这是js实现的最原始的方式,可能不同的浏览器会有不同的展示效果,如果对界面要求不高,这完全可以满足需求了,如果对界面要求高,可以自定义UI,思路get到了就可以了,关键点就是点击取消的时候,阻止a的默认操作,不让它有跳转,删除数据的路由跳转不过去,那么删除数据的操作也就不能实现了,就阻止了删除的操作。



猜你喜欢

转载自blog.csdn.net/hbysj/article/details/80185430