日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

利用JavaScript选择GridView行

發布時間:2024/9/20 javascript 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 利用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行的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。