小議GridView中的刪除按鈕

　　先不說GridView在前臺表現(xiàn)如何,在后臺頁面中,我覺得它是一個挺不錯的控件,最關(guān)鍵的是它給我們帶來的便捷。比如，在使用GridView時,想刪除一條記錄是如此簡單,僅僅只需將一個控件的CommandName設(shè)為”Delete”,然后在數(shù)據(jù)源控件中寫一下DeleteMethod，但刪除記錄時不提示一下用戶總不太好，于是我們又加上了OnClientClick=”return confirm(‘確定刪除?’)”。但此時的提示是彈出一個不怎么讓人喜歡的模態(tài)提示框（至少我不喜歡:-)），那我想，把它改成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>

現(xiàn)在要改的，就是那個LinkButton，我希望它是這樣的，點擊后，在刪除鏈接的附近出現(xiàn)個小div，內(nèi)有兩個按鈕：“確定”和“取消”，點擊“確定”后提交，點擊“取消”不提交，同時，我又不希望保留利用CommandName=”Delete”來刪除記錄的快捷方法。
 

先看效果圖：

想保留利用CommandName=”Delete”來刪除記錄的快捷方法，就得先看看它是如何實現(xiàn)的，在瀏覽器中打開頁面源代碼，找到：

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

刪除每一條記錄的刪除鏈接的不同之處就在于__doPostBack中的參數(shù)，它其實是那個LinkButton生成之后的ClientID經(jīng)過某點小改變之后得來的，想利用CommandName=”Delete”來刪除記錄，我們就得知道這個id，那么就可以通過在彈出的div提示框中確定按鈕的onclick中調(diào)用__doPostBack(‘得到的按鈕id’,’’)來執(zhí)行了，那問題就在于如何得到這個id，上面的html源代碼中的刪除鏈接并沒有生成id(沒有實實在在的設(shè)置它的html屬性id的值),難道我們要硬編碼？這肯定不行。其實很簡單，只要給那個LinkButton加上ID屬性，那在生成的html的鏈接中就會有id屬性，現(xiàn)在把GridView中的LinkButton改成: 

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

再找看運行時的html源代碼，發(fā)現(xiàn)變成了：

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

恩，那現(xiàn)在就是實現(xiàn)div的彈出框了，現(xiàn)在再改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函數(shù)就是接下來要實現(xiàn)的。

divConfirm的聲明：

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

e: event對象；
msg:提示信息；
okBtnClassName:確定按鈕的樣式名稱，默認(rèn)為”button”；
cancelBtnClassName:取消按鈕的樣式名稱，默認(rèn)為”button”；
callBackStringWhenOk:當(dāng)點擊確定按鈕時要觸發(fā)的js代碼，是字符串格式，一會兒用eval來執(zhí)行；

現(xiàn)在再看看調(diào)用語句:

return divConfirm(event, '確定要刪除嗎?', '', '', '__doPostBack(\'' + this.id.replace(/_/g,'$') + '\',\'\')');
因為生成的刪除鏈接的id和__doPostBack中的參數(shù)是有區(qū)別的，區(qū)別就是把下劃線_替換成了$，所以要做這個替換. 
 

下面是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    //這里省略，主要就是創(chuàng)建幾個div，用來作提示框
 8    //
 9
10    //創(chuàng)建按鈕，createBtn見下方
11     var okBtn = createBtn("確定", okBtnClassName);
12    okBtn.onclick = function() {
13        document.body.removeChild(msgDiv);
14        //點擊“確定”時就執(zhí)行它了來做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按鈕，并設(shè)置樣式名稱
27    }
28
29    //這里將兩個按鈕append到提示做對話框的那個div中，省略不寫
30
31    //獲取“刪除”按鈕的絕對位置，getPostion函數(shù)見下方
32    var pos = getPosition(src);
33    
34    //設(shè)置提示對話框的位置，我們需要適當(dāng)?shù)钠?/span>
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//返回：數(shù)組，其中一個元素為橫坐標(biāo)，一個為縱坐標(biāo)
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}

現(xiàn)在就算完成了，不過總是會出現(xiàn)些垃圾代碼，比如那個LinkButton刪除按鈕生成的html代碼中的href屬性的值就是多余的。
 

源js代碼文件下載：https://files.cnblogs.com/mouhong-lin/divConfirm.js