词条统计
浏览次数:7697 次
编辑次数:5次 历史版本
最近更新:2013/6/20
创建者:掷鸡蛋者

在开发删除数据这种功能的时候,一般都比较谨慎,要求用户确认一下。


我们有两种方式可以做到,第一种,在删除的链接上打上 deleteCmd 类,框架会自动弹出确认对话框,如下图:



这种方式,其实是调用了 js 自带的confirm("msg")方法,实现比较简单,但有两个缺点:

1)弹窗在网页的正中央,不在鼠标点击周围;

2)用户点击确认之后,不能马上看到数据被删除的效果,往往还有一个页面跳转的过程。


下面介绍一个1.6自带的功能 ajaxDeleteCmd。它的效果如下:



你点击之后,在鼠标下面,即可出现一个小弹窗,如果点击“确认”,当前那一列自动清除,页面不会刷新。

你现在可以在线体验它的demo:在你的微博中随便发布一条微博,然后点击删除试试。


使用方法


1)视图界面


如何使用 ajaxDeleteCmd?很简单,只要在原始链接上加上 ajaxDeleteCmd 类即可:


    <a href="deleteUrl" class="ajaxDeleteCmdremoveId="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不支持。