GridView实现toolTip功能

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量2.1k 收藏
点赞数
分类专栏： Demo锻炼 文章标签： border server button asp javascript function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jame_peng/article/details/1608660
版权
<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title > 无标题页 </ title >
     < script language = " javascript "  type = " text/javascript " >
         function  selectkk()
         {
         var item = document.getElementById('Select1');
         // window.alert("sddsdsd");
          if(item.selectedIndex!=0)
          {
            window.alert(item.options[item.selectedIndex].text);
          }
          else
          {
             window.alert("is 0");
          }
          
        }
        
         function  showDetail(cell1,cell2)
         {
           document.getElementById('td1').innerText="Name:"+cell1;
           document.getElementById('td2').innerText="Address:"+cell2;
           //获得鼠标的X轴的坐标
            x = event.clientX + document.body.scrollLeft;
             
           //获得鼠标的Y轴的坐标
          y = event.clientY + document.body.scrollTop+10;
           
            //显示弹出窗体
           Popup.style.display="block";
          
           //设置窗体的X,Y轴的坐标
           Popup.style.left = x;
           Popup.style.top = y;
        }
          // 隐藏弹出窗体
         function  hide()
       {
             //隐藏窗体
           Popup.style.display="none";
         }

     </ script >
        < style type = " text/css " >
     .transparent 
      { BORDER-RIGHT: indianred 1px solid; 
     BORDER-TOP: indianred 1px solid;
      DISPLAY: none; FILTER: alpha(opacity=85);
       BORDER-LEFT: indianred 1px solid; 
       BORDER-BOTTOM: indianred 1px solid; 
       POSITION: absolute; 
       BACKGROUND-COLOR: infobackground; 
       font-color;red;}
        </ style >

</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
         < table border = " 1 "  style = " width: 50% " >
             < caption >
             </ caption >
             < tr >
                 < td style = " width: 100px " >
                 </ td >
                 < td style = " width: 100px " >
                     < select id = " Select1 "  style = " width: 109px "  name = " slt " >
                         < option value = " 0 " ><-- seleted --></ option >
                         < option value = " 1 " > zhanpeng </ option >
                         < option value = " 2 " > zhanjia </ option >
                         < option value = " 3 " > lee jing </ option >
                        
                     </ select >
                 </ td >
                 < td style = " width: 122px " >
                     < input id = " Button1 "  type = " button "  value = " button "  onclick = " selectkk(); "  runat = " server "   /></ td >
             </ tr >
             < tr >
                 < td style = " width: 100px " >
                 </ td >
                 < td style = " width: 100px " >
                 </ td >
                 < td style = " width: 122px " >
                 </ td >
             </ tr >
             < tr >
               
                 < td style = " width: 100px; height: 30px; " >
                 </ td >
               
                 < td style = " width: 100px; height: 30px; " >
                     & nbsp; < asp:GridView ID = " GridView1 "  runat = " server "  AutoGenerateColumns = " false "  OnRowDataBound = " GridView1_RowDataBound "  Width = " 326px "  OnRowCreated = " GridView1_RowCreated " >
                     < Columns >
                    
                      < asp:BoundField DataField = " Name "  HeaderText = " Name " />
                      < asp:BoundField DataField = " Address "  HeaderText = " Address "   />
                     </ Columns >
                     </ asp:GridView >
                 </ td >
                 < td style = " width:300; height: 30px; " >
                   < div id = " Popup "  class = " transparent "  style = " Z-INDEX:200; " >
                     < table style = " width: 300 " >
                         < tr >
                             < td style = " width: 100px "  id = " td1 " >
                             </ td >
                           
                         </ tr >
                         < tr >
                             < td style = " width: 100px; height: 21px; "  id = " td2 " >
                             </ td >
                         </ tr >
                     </ table >
                     </ div >
                 </ td >
             </ tr >
         </ table >
    
     </ div >
     </ form >
</ body >
</ html >
<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title > 无标题页 </ title >
     < script language = " javascript "  type = " text/javascript " >
        function selectkk()
         {
         var item = document.getElementById('Select1');
         // window.alert("sddsdsd");
          if(item.selectedIndex!=0)
          {
            window.alert(item.options[item.selectedIndex].text);
          }
          else
          {
             window.alert("is 0");
          }
          
        }
        
        function showDetail(cell1,cell2)
         {
           document.getElementById('td1').innerText="Name:"+cell1;
           document.getElementById('td2').innerText="Address:"+cell2;
           //获得鼠标的X轴的坐标
            x = event.clientX + document.body.scrollLeft;
             
           //获得鼠标的Y轴的坐标
          y = event.clientY + document.body.scrollTop+10;
           
            //显示弹出窗体
           Popup.style.display="block";
          
           //设置窗体的X,Y轴的坐标
           Popup.style.left = x;
           Popup.style.top = y;
        }
          // 隐藏弹出窗体
        function hide()
       {
             //隐藏窗体
           Popup.style.display="none";
         }

     </ script >
        < style type = " text/css " >
     .transparent 
      { BORDER-RIGHT: indianred 1px solid; 
     BORDER-TOP: indianred 1px solid;
      DISPLAY: none; FILTER: alpha(opacity=85);
       BORDER-LEFT: indianred 1px solid; 
       BORDER-BOTTOM: indianred 1px solid; 
       POSITION: absolute; 
       BACKGROUND-COLOR: infobackground; 
       font-color;red;}
        </ style >

</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
         < table border = " 1 "  style = " width: 50% " >
             < caption >
             </ caption >
             < tr >
                 < td style = " width: 100px " >
                 </ td >
                 < td style = " width: 100px " >
                     < select id = " Select1 "  style = " width: 109px "  name = " slt " >
                         < option value = " 0 " ><-- seleted --></ option >
                         < option value = " 1 " > zhanpeng </ option >
                         < option value = " 2 " > zhanjia </ option >
                         < option value = " 3 " > lee jing </ option >
                        
                     </ select >
                 </ td >
                 < td style = " width: 122px " >
                     < input id = " Button1 "  type = " button "  value = " button "  onclick = " selectkk(); "  runat = " server "   /></ td >
             </ tr >
             < tr >
                 < td style = " width: 100px " >
                 </ td >
                 < td style = " width: 100px " >
                 </ td >
                 < td style = " width: 122px " >
                 </ td >
             </ tr >
             < tr >
               
                 < td style = " width: 100px; height: 30px; " >
                 </ td >
               
                 < td style = " width: 100px; height: 30px; " >
                     & nbsp; < asp:GridView ID = " GridView1 "  runat = " server "  AutoGenerateColumns = " false "  OnRowDataBound = " GridView1_RowDataBound "  Width = " 326px "  OnRowCreated = " GridView1_RowCreated " >
                     < Columns >
                    
                      < asp:BoundField DataField = " Name "  HeaderText = " Name " />
                      < asp:BoundField DataField = " Address "  HeaderText = " Address "   />
                     </ Columns >
                     </ asp:GridView >
                 </ td >
                 < td style = " width:300; height: 30px; " >
                   < div id = " Popup "   class = " transparent "  style = " Z-INDEX:200; " >
                     < table style = " width: 300 " >
                         < tr >
                             < td style = " width: 100px "  id = " td1 " >
                             </ td >
                           
                         </ tr >
                         < tr >
                             < td style = " width: 100px; height: 21px; "  id = " td2 " >
                             </ td >
                         </ tr >
                     </ table >
                     </ div >
                 </ td >
             </ tr >
         </ table >
    
     </ div >
     </ form >
</ body >
</ html >

===============================
using  System;
 using  System.Data;
 using  System.Configuration;
 using  System.Web;
 using  System.Web.Security;
 using  System.Web.UI;
 using  System.Web.UI.WebControls;
 using  System.Web.UI.WebControls.WebParts;
 using  System.Web.UI.HtmlControls;
 using  System.Data.SqlClient;

 public   partial   class  _Default : System.Web.UI.Page 
 {
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            getDate();
        }
    }

    public void getDate()
    {
        SqlConnection con = new SqlConnection("server=server01;database=test;uid=sa;pwd=sql");
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter("select * from tab", con);
        DataSet ds = new DataSet();
        da.Fill(ds);
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#C0C0FF';this.style.cursor='hand';showDetail('" + e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "')");
        

            e.Row.Attributes.Add("onmouseout", "hide();this.style.backgroundColor=currentcolor;");
           

        }
    }
    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {

        //if (e.Row.RowType == DataControlRowType.DataRow)
        //{
        //    e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#C0C0FF';this.style.cursor='hand';");
        //    当鼠标移走时还原该行的背景色
        //    //e.Row.Attributes.Add("onmouseover", "showDetail('" + e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "')");

        //    e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor;hide();");

        //}
    }
}

 
jame_peng
关注
专栏目录
C# GridView中鼠标指向行ToolTip提示相关信息
tangjun0102的专栏
10-10 1366
下载ToolTip.rar文件(http://download.csdn.net/source/1729047)打开vs2005 新建一个项目新建一个连接数据库的类(这里不在多讲)打开Default.aspx文件引用ToolTip.js文件(从ToolTip中解压出来,复制到项目中),放在之间添加一个GridView控件邦定相应的数据给GridView添加RowDa
C#中datagridview使用tooltip控件显示单元格内容与datagridview自带的tooltip显示单元格内容的方法
程序猿
11-05 4085
1、datagridview自带的tooltip显示单元格内容的方法namespace WindowsFormsApplication1 { public partial class Form1 : Form { public Form1() { InitializeComponent(); this.d
Gridview Tooltip
wooden_knocker的专栏
04-21 1330
         function selectkk()        {         var item = document.getElementById(Select1);         // window.alert("sddsdsd");          if(item.selectedIndex!=0)          {            window.alert(i
GridView 使用ToolTip 显示提示文本内容
vicky的专栏
07-01 2360
1. 主要是2个事件， 1.1 MouseMove 触发自动提示 1.2 MouseLeave 隐藏rjfi
实现GridView Tooltip的功能
clever_yang的专栏
09-26 1053
"C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www
JavaScript、GridView、TOOLTIP各种使用技巧
12-29
在网页中，JavaScript可以实现用户输入验证、页面动态更新、AJAX异步通信等功能，极大地提升了用户体验。 GridView是ASP.NET框架中的一个重要控件，主要用于数据展示，常见于Web应用程序的数据表格展示。它可以轻松...
Dev GridView 右键Tooltip展示与Cell相关的内容
kljde的专栏
09-26 749
//鼠标右键   private void bgvXjgl_MouseDown(object sender, MouseEventArgs e)         {             GridHitInfo HIGL = bgvXjgl.CalcHitInfo(e.X,e.Y);             if (e.Button== System.Windows.Forms.Mous
C#中datagridview使用tooltip控件显示单元格内容的方法
09-02
这可以通过`CellMouseLeave`事件实现： ```csharp private void dgvUserInfo_CellMouseLeave(object sender, DataGridViewCellEventArgs e) { this.toolTip.Hide(this.dgvUserInfo); } ``` 而当鼠标进入`...
经典cookie购物车源码[GridView实现]
09-11
<asp:LinkButton ID="LinkButton3" runat="server" ToolTip=" " >清空购物车 下订单 AddToCart.aspx.cs页面代码 using System; using System.Data; using System.Configuration; using System....
DEVGridview给单元格添加指定的tooltip
Mark_mwl的博客
02-09 711
gridview给单元格添加tooltip
GridView中ToolTip使用方法
yl_99的专栏
06-25 3682
onrowdatabound="GridView1_RowDataBound">                                                                      ToolTip='' Text=''>
给 asp:GridView 添加title(ToolTip)属性
qq_15785207的博客
07-24 517
给每一行绑定数据时,给每一列添加title属性。title属性为HTML5中的属性 protected void exGridView_RowDataBound(object sender, GridViewRowEventArgs e) { for (int i = 0; i < e.Row.Cells.Count; i++)//获取总列数 ...
C# datagridview toolTip悬浮框显示详细内容
热门推荐
u012725119的专栏
12-21 1万+
如图所示，这是公司要我实现的需求。 我的本次采购数量是多个合同的和，所以我想在看这一条的时候显示他们分别是哪个合同的，分别采购了多少。 第一拖一个tooptip控件实现Draw事件 给我们的控件设置下属性 this.dgv_goodsSum.ShowCellToolTips = false; this.toolTip1.AutomaticD
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 920
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
DEV控件gridview中怎么添加行的ToolTip提示
06-13
在 DevExpress 控件的 GridView 中，可以为每一行添加 Tooltip 提示信息。可以通过以下步骤实现： 1. 在设计时，打开 GridView 控件的 Columns Designer。 2. 在 Columns Designer 中，选择需要添加 Tooltip 的列，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值