實作 GridView 整列選取功能使用 JavaScript
- 2011-01-03
- 22539
- 0
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有偷偷地把第一行藏起來,所以命令列一定要放在第一行
這時候點選欄位就會有選取的功能了。
這種寫法有幾點需要注意的
- 如果你改變了選取的命令列那 js 的 $(this).children().eq(0).hide();就必須對應修改。
- 當你的GridView 內擁有其他控制項的時候(比如Checkbox)整列點會造成無窮迴圈,必須要防止事件冒泡event.cancelBubble=true;
回應討論