demoshop

GridView 是一個很好用的控制項，什麼功能都有（雖然我覺得新的ListView更好用）最近有個案子要求我在 GridView 加上整列選取的功能，其實這功能並不難寫只需要利用 JavaScript 就可以辦到了，

為了求簡單方便，所以本文章有些偷吃步的作法，喜歡中規中矩的朋友可能會不喜歡，相當抱歉哩

 

首先頁面上拉出一個 GridView 並且加上 onload 的事件

<asp:GridView ID="GridView1" runat="server" onload="GridView1_Load">
</asp:GridView>

---

而程式中就直接給資料

protected void GridView1_Load(object sender, EventArgs e)
{
List<int> fakeData = new List<int>();
fakeData.AddRange(Enumerable.Range(1, 10));
this.GridView1.DataSource = fakeData;
this.GridView1.DataBind();
}

---

這時候執行來看就可以看到以下的畫面了

---

再來就要執行偷吃步的作法首先利用智慧標籤增加一個命令欄位

---

接下來要確定選擇是有用的所以再加一個 onselectedindexchanged 事件

<asp:GridView ID="GridView1" runat="server"
onload="GridView1_Load"
EnableModelValidation="True"
onselectedindexchanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>

---

程式就來寫

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
Response.Write("您選取了："+ ((GridView)sender).SelectedIndex);
}

這樣子再來執行頁面按下選取就可以看到的確是有正確的選出來。

---

再來就是本文的重點，整列選（雖然本範例只有一列...）將它轉成樣板是最簡單的選擇所以我們就簡單做吧

---

寫一段 JS 來賦予GridView 的整列點選功能

function gridviewSelectRow(selector,btnID ) {
    /// <summary>
    /// 讓整個 Grid View Row 可以點選（選取按鈕必須是 linkbutton）
    /// </summary>
    /// <param name="selector">搜尋語句</param>
    /// <param name="btnID">綁有 select 事件的 linkbutton ID</param>
    $(selector).each(function () {
        $(this).children().eq(0).hide();
    });
    $(selector).click(function (e) {
        var doevent = $(this).find("td a[id$='" + btnID + "']").attr('href');
        if (doevent == null||doevent.indexOf('javascript:__doPostBack(')<0) {
            alert('無法正確選取，請確認你的 linkbutton 設定正確。');
        }
        else {
            eval(doevent);
        }
        return false;
    });
}

此Script 是使用 jQuery 寫的所以記得要載入並且要在頁面讀取完畢以後才呼叫這個 function

$(function () {
   gridviewSelectRow("table[id$='GridView1'] tr", 'LinkButton1');
});

---

執行頁面來看，會發現還是只有長這樣

因為剛剛那段 js Function demo有偷偷地把第一行藏起來，所以命令列一定要放在第一行

這時候點選欄位就會有選取的功能了。

---

這種寫法有幾點需要注意的

1. 如果你改變了選取的命令列那 js 的 $(this).children().eq(0).hide();就必須對應修改。
2. 當你的GridView 內擁有其他控制項的時候（比如Checkbox）整列點會造成無窮迴圈，必須要防止事件冒泡event.cancelBubble=true;