demoshop

demo, trying to be the best_

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

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

 

●首先頁面上拉出一個 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有偷偷地把第一行藏起來,所以命令列一定要放在第一行

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


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

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

回應討論