Gridview中当鼠标经过数据行时弹出一个层显示数据

最新推荐文章于 2019-08-26 13:45:56 发布

weixin_33868027

最新推荐文章于 2019-08-26 13:45:56 发布

阅读量144

点赞数 1

文章标签： javascript ViewUI

本文介绍了一个使用 ASP.NET 和 JavaScript 实现的 GridView 控件鼠标悬停时显示详细信息的方法。该方法通过修改 GridView 的 onmouseover 和 onmouseout 事件，结合弹出层展示所选行的详细数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台代码：

JS代码

1 <script language="javascript" type="text/javascript">
2 function Test(name,companyName,contactName,contactTitle,address)
3 {
4 var x = event.clientX;
5 var y =event.clientY;
6 document.getElementById("td1").innerText ="姓名:"+name;
7 document.getElementById("td2").innerText ="工作单位:"+companyName;
8 document.getElementById("td3").innerText ="负责人:"+contactName;
9 document.getElementById("td4").innerText ="职位:"+contactTitle ;
10 document.getElementById("td5").innerText ="地址:"+address;
11 document.getElementById("div1").style.position='absolute';
12 document.getElementById("div1").style.display='block';
13 document.getElementById("div1").style.left =x;
14 document.getElementById("div1").style.top = y;
15 }
16 function Hide()
17 {
18 document.getElementById("div1").style.display='none';
19 }
20 </script>

页面源码

1 <div id="div1" style="display: none; border:solid 1px #000080">
2 <table>
3 <tr >
4 <td id="td1" style="border-bottom:solid 1px #000080">
5 </td>
6 </tr>
7 <tr>
8 <td id="td2" style="border-bottom:solid 1px #000080">
9 </td>
10 </tr>
11 <tr>
12 <td id="td3" style="border-bottom:solid 1px #000080">
13 </td>
14 </tr>
15 <tr>
16 <td id="td4" style="border-bottom:solid 1px #000080">
17 </td>
18 </tr>
19 <tr>
20 <td id="td5">
21 </td>
22 </tr>
23 </table>
24 </div>
25 <div>
26 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
27 onrowdatabound="GridView1_RowDataBound">
28 <Columns>
29 <asp:BoundField DataField="CustomerID" HeaderText="姓名" />
30 <asp:BoundField DataField="CompanyName" HeaderText="工作单位" />
31 <asp:BoundField DataField="ContactName" HeaderText="负责人" />
32 <asp:BoundField DataField="ContactTitle" HeaderText="职位" />
33 <asp:BoundField DataField="Address" HeaderText="地址" />
34 </Columns>
35 </asp:GridView>
36 </div>

后台代码：

后台源码

1 protected void Page_Load(object sender, EventArgs e)
2 {
3
4 if (!IsPostBack)
5 {
6 databind();
7 }
8 }
9 public void databind()
10 {
11 SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ToString());
12 SqlCommand cmd = new SqlCommand();
13 cmd.Connection = con;
14 cmd.CommandText = "Select top 10 * From Customers";
15 SqlDataAdapter da = new SqlDataAdapter(cmd);
16 DataSet ds = new DataSet();
17 da.Fill(ds);
18 this.GridView1.DataSource = ds.Tables[0];
19 this.GridView1.DataKeyNames = new string[] { "CustomerID" };
20 this.GridView1.DataBind();
21 }
22 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
23 {
24 if (e.Row.RowType == DataControlRowType.DataRow)
25 {
26 e.Row.Attributes.Add("onmouseover", "Test('" + e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "','" + e.Row.Cells[2].Text + "','" + e.Row.Cells[3].Text + "','" + e.Row.Cells[4].Text + "')");
27 e.Row.Attributes.Add("onmouseout", "Hide()");
28 }
29 }