小议GridView中的删除按钮

  先不说GridView在前台表现如何,在后台页面中,我觉得它是一个挺不错的控件,最关键的是它给我们带来的便捷。比如,在使用GridView时,想删除一条记录是如此简单,仅仅只需将一个控件的CommandName设为”Delete”,然后在数据源控件中写一下DeleteMethod,但删除记录时不提示一下用户总不太好,于是我们又加上了OnClientClick=”return confirm(‘确定删除?’)”。但此时的提示是弹出一个不怎么让人喜欢的模态提示框(至少我不喜欢:-)),那我想,把它改成div的提示框吧?说干就干。

这里是利用ObjectDataSource和GridView配合的:

aspx

现在要改的,就是那个LinkButton,我希望它是这样的,点击后,在删除链接的附近出现个小div,内有两个按钮:“确定”和“取消”,点击“确定”后提交,点击“取消”不提交,同时,我又不希望保留利用CommandName=”Delete”来删除记录的快捷方法。
 

先看效果图:

想保留利用CommandName=”Delete”来删除记录的快捷方法,就得先看看它是如何实现的,在浏览器中打开页面源代码,找到:

<onclick=” return confirm(‘确定删除?’)”  href="javascript:__doPostBack('ctl00$mainHolder$afficheList$ctl02$ctl00','')">删除</a>

删除每一条记录的删除链接的不同之处就在于__doPostBack中的参数,它其实是那个LinkButton生成之后的ClientID经过某点小改变之后得来的,想利用CommandName=”Delete”来删除记录,我们就得知道这个id,那么就可以通过在弹出的div提示框中确定按钮的onclick中调用__doPostBack(‘得到的按钮id’,’’)来执行了,那问题就在于如何得到这个id,上面的html源代码中的删除链接并没有生成id(没有实实在在的设置它的html属性id的值),难道我们要硬编码?这肯定不行。其实很简单,只要给那个LinkButton加上ID属性,那在生成的html的链接中就会有id属性,现在把GridView中的LinkButton改成: 

<asp:LinkButton runat="server" ID="delBtn" CssClass="delLink" OnClientClick="return confirm(‘确定删除?’)" CommandName="Delete" Text="删除"></asp:LinkButton>

再找看运行时的html源代码,发现变成了:

<onclick="…" id="ctl00_mainHolder_afficheList_ctl02_delBtn" href="javascript:__doPostBack('ctl00$mainHolder$afficheList$ctl02$delBtn','')">删除</a>

恩,那现在就是实现div的弹出框了,现在再改LinkButton:

<asp:LinkButton runat="server" ID="delBtn" CssClass="delLink" OnClientClick="return divConfirm(event, '确定要删除吗?', '', '', '__doPostBack(\'' + this.id.replace(/_/g,'$') + '\',\'\')');" CommandName="Delete" Text="删除"></asp:LinkButton>

其实也就改动一下OnClientClick的值了,divConfirm函数就是接下来要实现的。

divConfirm的声明

function divConfirm(e, msg, okBtnClassName, cancelBtnClassName, callBackStringWhenOk)

e: event对象;
msg:提示信息;
okBtnClassName:确定按钮的样式名称,默认为”button”;
cancelBtnClassName:取消按钮的样式名称,默认为”button”;
callBackStringWhenOk:当点击确定按钮时要触发的js代码,是字符串格式,一会儿用eval来执行;

现在再看看调用语句:

return divConfirm(event, '确定要删除吗?', '', '', '__doPostBack(\'' + this.id.replace(/_/g,'$') + '\',\'\')');
因为生成的删除链接的id和__doPostBack中的参数是有区别的,区别就是把下划线_替换成了$,所以要做这个替换. 
 

下面是divConfirm的主要代码:

Javascript


现在就算完成了,不过总是会出现些垃圾代码,比如那个LinkButton删除按钮生成的html代码中的href属性的值就是多余的。
 

源js代码文件下载:https://files.cnblogs.com/mouhong-lin/divConfirm.js

posted @ 2008-07-29 01:02  水言木  阅读(1449)  评论(2编辑  收藏  举报