1. 程式人生 > >利用JavaScript選擇GridView行

利用JavaScript選擇GridView行

null ack event 選擇 for idv response origin write

本篇技巧和訣竅記錄的是:利用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);
}

利用JavaScript選擇GridView行