在开发删除数据这种功能的时候,一般都比较谨慎,要求用户确认一下。
我们有两种方式可以做到,第一种,在删除的链接上打上 deleteCmd 类,框架会自动弹出确认对话框,如下图:
这种方式,其实是调用了 js 自带的confirm("msg")方法,实现比较简单,但有两个缺点:
1)弹窗在网页的正中央,不在鼠标点击周围;
2)用户点击确认之后,不能马上看到数据被删除的效果,往往还有一个页面跳转的过程。
下面介绍一个1.6自带的功能 ajaxDeleteCmd。它的效果如下:
你点击之后,在鼠标下面,即可出现一个小弹窗,如果点击“确认”,当前那一列自动清除,页面不会刷新。
你现在可以在线体验它的demo:在你的微博中随便发布一条微博,然后点击删除试试。
使用方法
1)视图界面
如何使用 ajaxDeleteCmd?很简单,只要在原始链接上加上 ajaxDeleteCmd 类即可:
<a href="deleteUrl" class="ajaxDeleteCmd" removeId="mblog141">删除</a>
然后,请增加一个 removeId 属性,服务端删除成功之后,框架会自动将 id 为 removeId 的元素删除掉(例子中是mblog141)。
2)后端代码
在后端的action中,你需要在删除成功之后加上一句 echoAjaxOk();
如果要返回删除错误信息,请使用 echoError( "" ); 方法
内部原理
1)在你点击之后,框架自动替你生成了一个弹窗;
2)点击确定之后,框架帮你向删除链接发起一个ajax post请求;
3)如果删除成功(从服务端得到ok的反馈信息),则将removeId指定的页面元素清除掉。
【补充说明】
1)如果不喜欢这个弹窗的样式,请修改 /static/css/wojilu.common.css 中的 .ebox 部分
2)如果你不幸的在使用IE浏览器,将看不到圆角和阴影效果,因为这个弹窗样式使用了css3的功能。google浏览器,firefox,苹果的safari都支持圆角和阴影,但IE6/IE7/IE8不支持。