小议GridView中的删除按钮

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

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

aspx
<asp:ObjectDataSource runat="server" ID="src"
       TypeName="SevenHands.Studio.BLL.AfficheManager"
       DataObjectTypeName="SevenHands.Studio.Model.Affiche"
       … …
       DeleteMethod="Delete">
</asp:ObjectDataSource>
… …
<asp:GridView runat="server" CssClass="dataTable" DataKeyNames="Id" DataSourceID="src">
     <Columns>
    … …
        <asp:TemplateField HeaderText="操作" ItemStyle-CssClass="operationField">
            <ItemTemplate>
                <asp:LinkButton runat="server" CssClass="delLink" OnClientClick="return confirm(‘确定删除?’)" CommandName="Delete" Text="删除"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
     </Columns>
</asp:GridView>

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

先看效果图：

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

< a  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源代码，发现变成了：

< a  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
 1function divConfirm(e, msg, okBtnClassName, cancelBtnClassName, callBackStringWhenOk) {
 2    //获取event对象和刚才点击的删除按钮(src)，注意有浏览器兼容问题
 3     var eve = e == null? window.event : e;
 4    var src = e.target == null ? e.srcElement : e.target;
 5    
 6    //
 7    //这里省略，主要就是创建几个div，用来作提示框
 8    //
 9
10    //创建按钮，createBtn见下方
11     var okBtn = createBtn("确定", okBtnClassName);
12    okBtn.onclick = function() {
13        document.body.removeChild(msgDiv);
14        //点击“确定”时就执行它了来做asp.net的postBack了
15         eval(callBackStringWhenOk);    
16    }
17    var cancelBtn = createBtn("取消", cancelBtnClassName);
18    cancelBtn.onclick = function() {
19        document.body.removeChild(msgDiv);
20    }
21    cancelBtn.style.marginLeft = "10px";
22
23    //text:按钮显示的字
24    //className:样式名
25    function createBtn(text, className) {
26        //这里省略，它将返回一个html按钮，并设置样式名称
27    }
28
29    //这里将两个按钮append到提示做对话框的那个div中，省略不写
30
31    //获取“删除”按钮的绝对位置，getPostion函数见下方
32    var pos = getPosition(src);
33    
34    //设置提示对话框的位置，我们需要适当的偏移
35     msgDiv.style.top = pos[1] + 20 + "px";
36    msgDiv.style.right = document.body.clientWidth - pos[0] - 20 + "px";
37   
38    window.document.body.appendChild(msgDiv);    //最后把提示对话框加到body中
39    
40    return false;  //始终返回false
41}
42
43//返回元素的绝对位置
44//ele:要计算的元素
45//返回：数组，其中一个元素为横坐标，一个为纵坐标
46function getPosition(ele) {
47    var result = [ele.offsetLeft, ele.offsetTop];
48    
49    if (ele.offsetParent != null) {
50        var newResult = getPosition(ele.offsetParent);
51        result[0] += newResult[0];
52        result[1] += newResult[1];
53    }
54    
55    return result;
56}

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

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

转载于:https://www.cnblogs.com/mouhong-lin/archive/2008/07/29/1255172.html