利用JavaScript選擇GridView行

標籤：

利用JavaScript選擇GridView行

本篇技巧和訣竅記錄的是：利用JavaScript選擇GridView行。

當我們想在GridView中添加刪除、選擇功能時，我們通常的做法是利用模板功能在每行添加一個按鈕控制項或者超連結按鈕控制項，單擊按鈕利用RowCommand擷取每行的ID。

下面我們利用JavaScript完成這一功能。
我們可以通過調用JavaScirpt函數改變單擊的行的背景顏色來類比選擇的行，這裡需要聲明一個隱藏欄位，從JS中獲得選取GridView行的ID。在選擇/刪除事件中，可以從隱藏欄位中得到選擇行的ID，完成一些需要功能。

第一步：在頁面中添加GridView控制項和一個按鈕，隱藏欄位

<input id="hdnEmailID" type="hidden"        value="0" runat="server" name="hdnEmailID" /><asp:GridView ID="gvUsers" runat="server"               AutoGenerateColumns="False"               OnRowDataBound="gvUsers_RowDataBound">    <Columns>        <asp:BoundField DataField="Email" HeaderText="郵件" ReadOnly="True" />        <asp:BoundField DataField="Name" HeaderText="姓名" ReadOnly="True" />    </Columns></asp:GridView><asp:Button ID="btnSelect" runat="server"             OnClick="btnSelect_Click" Text="Select" />

第二步：編寫JS函數來擷取選擇行的id，並改變背景顏色

<script language="javascript" type="text/javascript">    var lastRowSelected;    var originalColor;    function GridView_selectRow(row, EmailID)    {           var hdn=document.form1.hdnEmailID;          hdn.value = EmailID;          if (lastRowSelected != row)            {            if (lastRowSelected != null)             {              lastRowSelected.style.backgroundColor = originalColor;              lastRowSelected.style.color = ‘Black‘              lastRowSelected.style.fontWeight = ‘normal‘;             }          originalColor = row.style.backgroundColor          row.style.backgroundColor = ‘BLACK‘          row.style.color = ‘White‘          row.style.fontWeight = ‘normal‘          lastRowSelected = row;          }    }    function GridView_mouseHover(row)    {        row.style.cursor = ‘hand‘;    }</script>

略過一步，就是綁定資料，大家自行完成。

第三步：在RowDataBound事件中添加JS函數調用。

protected void gvUsers_RowDataBound(object sender, GridViewRowEventArgs e){    if (e.Row.RowType == DataControlRowType.DataRow)    {        e.Row.ID = e.Row.Cells[0].Text;        e.Row.Attributes.Add("onclick",             "GridView_selectRow(this,‘" + e.Row.Cells[0].Text + "‘)");        e.Row.Attributes.Add("onmouseover", "GridView_mouseHover(this)");    }}

第四步：完成按鈕事件

在選擇/刪除按鈕單擊事件我們可以用hdnEmailID.Value方式獲得行的id。然後利用id來完成操作；這裡為了示範，我只是輸出了這個值。

protected void btnSelect_Click(object sender, EventArgs e){    Response.Write(hdnEmailID.Value);}

好了，這個技巧就介紹到這裡了，大家試一試！

著作權聲明：本文為博主http://www.zuiniusn.com原創文章，未經博主允許不得轉載。

利用JavaScript選擇GridView行