當使用者在點選 GridView 中某個資料列時,
該列的背景就會替換成另一種顏色,以做區別。
GridView 是 ASP.Net 2.0 新增的新功能,
更正確的說,它是舊版 DataGrid 的加強版,
不但更佳的直覺化,
還可以幫助初學者在 codeless 的情形下無痛完成與資料庫聯結。
But...有一好就沒兩好,
也因 GridView 太過的人性化,
對初學者之後想要晉級更深一層時卻是一種阻礙。(我就是受害者)
所以之後我在用 GridView 時,
都避免用微軟提供的套件完成,
相反的, 從最基礎的 DataSet、DataAdapter 開始用起,
這樣對 ASP.Net 的運作流程會更深入的了解,
而且在客製化時可以變化出千百種花樣。 (當然陣痛期也是免不了的...)
扯遠了,
這篇要寫的是當使用者在點選 GridView 中某個資料列時,
該列的背景就會替換成另一種顏色,以做區別。
因為表格是在 Client 端呈現,
理所當然要借助 JavaScript 的力量來完成,
只不過這樣的力量要透過 C# codebehind 來賦予。
1. 首先請先將 GridView 元件給予以下參數,
其中 OnRowDataBound 代表從 DataSet 塞值給 GridView 時所會引發的事件:
2. 之後在 C# 程式碼中,
由 GridViewRowEventArgs 觸發的事件將 JavaScript 寫到表格的列標籤裡。
3. 接著 Client 端要執行的 JavaScript 程式碼: 完成之後 render 出來的 HTML 碼,
2 {
3 if (e.Row.RowType == DataControlRowType.DataRow)
4 {
5 e.Row.Attributes.Add("onclick", "select(this)");
6 }
7 }
02 var temp=null;
03 function select(sel)
04 {
05 if(temp==null)
06 {
07 temp=sel;
08 sel.style.backgroundColor="#CCFFFF"; //點選時改變行的顏色
09 }
10 else
11 {
12 temp.style.backgroundColor="#FFFFFF"; //點選別行時,原先行的顏色改回來
13 sel.style.backgroundColor="#CCFFFF"; //新選取的行改變顏色
14 temp=sel;
15 }
16 }
17 <script>
可以發現 JavaScript 是作用在列標籤(<tr>)內: