在GridView中为特定的信息加色,鼠标放上后显示详细信息
2008-05-19 21:16
411 查看
用户提出了这样一个需求:把测试数据和标准数据比较,对于大于标准数据的部分在网格中用红色表示出来,并且当鼠标放到这个数据上后,能在旁边显示详细信息(为什么超出标准等?)
要实现这样的效果,对于gridview的数据绑定只能是动态的,因为要在绑定的同时做出数据信息的判断,如果符合规则,就为该cell显示红色。
而要实现自定义鼠标提示效果,也很简单,只不过多了一个异步操作的动作,这里采用AjaxPro2.Dll实现异步操作。同时用一个div来承载要显示的详细信息,其位置跟随鼠标当前事件位置(javascript 中event对象的应用)。
可以看到,这里用到了javascript + css+ajax等等知识点:
下面是一个小的Demo,用来实例说明这样的效果:
效果显示:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script type ="text/javascript" >...
function showTip(oevent,address)
...{
var div=document.getElementById('div2');
var result=DbOp.getDetail(address).value;
var arrs=result.split(",");
var show="The ID IS :"+arrs[0]+"<br>"+"The name IS :"+arrs[1];
div.innerHTML=show;
div.style.visibility="visible";
div.style.left=oevent.clientX+5;
div.style.top=oevent.clientY+5;
}
function hidTip(oevent)
...{
var div=document.getElementById('div2');
div.style.visibility="hidden";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divshow" runat ="server" >
</div>
<div id="div2" runat ="server" style =" border :solid 1px red; background :#f0f0f0; visibility :hidden ; position :absolute">
xxxxx
</div>
</div>
</form>
</body>
</html>
CS:
protected void Page_Load(object sender, EventArgs e)
...{
AjaxPro.Utility.RegisterTypeForAjax(typeof(DbOp));
if (!IsPostBack)
...{
setBind();
}
}
private void setBind()
...{
DAL.ISDApp01 cDal=new DAL.ISDApp01();
string sql = "select * from test";
DataTable dt = cDal.ExecuteQuery(sql).Tables[0];
GridView gv = new GridView();
gv.AutoGenerateColumns = false;
BoundField bf = null;
for (int i = 0; i < dt.Columns.Count; i++)
...{
bf = new BoundField();
bf.DataField = dt.Columns[i].ColumnName;
bf.HeaderText = dt.Columns[i].ColumnName;
gv.Columns.Add(bf);
}
gv.DataSource = dt;
gv.DataBind();
for (int i = 0; i < dt.Rows.Count; i++)
...{
gv.Rows[i].Cells[2].ForeColor = System.Drawing.Color.Red;
string address = dt.Rows[i][2].ToString();
gv.Rows[i].Cells[2].Attributes.Add("onMouseover","showTip(event,'"+address+"')");
gv.Rows[i].Cells[2].Attributes.Add("onMouseout", "hidTip(event)");
}
divshow.Controls.Add(gv);
}
异步操作类:DbOp.cs
public class DbOp
...{
public DbOp()
...{
//
//TODO: 在此处添加构造函数逻辑
//
}
[AjaxPro.AjaxMethod]
public static string getDetail(string address)
...{
string sql = "select * from test where address='"+address+"'";
DAL.ISDApp01 cDal = new DAL.ISDApp01();
DataTable dt = cDal.ExecuteQuery(sql).Tables[0];
string id = dt.Rows[0][0].ToString();
string name = dt.Rows[0][1].ToString();
string s = id + "," + name;
return s;
}
}
同时要注意,要使用这个ajaxpro.dll组件,首先要添加引用ajax.pro.2.dll
然后在web.config的httpHandlers中,加入
<httpHandlers>
<!-- Register the ajaxpro for .NET 2.0 handler -->
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
要实现这样的效果,对于gridview的数据绑定只能是动态的,因为要在绑定的同时做出数据信息的判断,如果符合规则,就为该cell显示红色。
而要实现自定义鼠标提示效果,也很简单,只不过多了一个异步操作的动作,这里采用AjaxPro2.Dll实现异步操作。同时用一个div来承载要显示的详细信息,其位置跟随鼠标当前事件位置(javascript 中event对象的应用)。
可以看到,这里用到了javascript + css+ajax等等知识点:
下面是一个小的Demo,用来实例说明这样的效果:
效果显示:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script type ="text/javascript" >...
function showTip(oevent,address)
...{
var div=document.getElementById('div2');
var result=DbOp.getDetail(address).value;
var arrs=result.split(",");
var show="The ID IS :"+arrs[0]+"<br>"+"The name IS :"+arrs[1];
div.innerHTML=show;
div.style.visibility="visible";
div.style.left=oevent.clientX+5;
div.style.top=oevent.clientY+5;
}
function hidTip(oevent)
...{
var div=document.getElementById('div2');
div.style.visibility="hidden";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divshow" runat ="server" >
</div>
<div id="div2" runat ="server" style =" border :solid 1px red; background :#f0f0f0; visibility :hidden ; position :absolute">
xxxxx
</div>
</div>
</form>
</body>
</html>
CS:
protected void Page_Load(object sender, EventArgs e)
...{
AjaxPro.Utility.RegisterTypeForAjax(typeof(DbOp));
if (!IsPostBack)
...{
setBind();
}
}
private void setBind()
...{
DAL.ISDApp01 cDal=new DAL.ISDApp01();
string sql = "select * from test";
DataTable dt = cDal.ExecuteQuery(sql).Tables[0];
GridView gv = new GridView();
gv.AutoGenerateColumns = false;
BoundField bf = null;
for (int i = 0; i < dt.Columns.Count; i++)
...{
bf = new BoundField();
bf.DataField = dt.Columns[i].ColumnName;
bf.HeaderText = dt.Columns[i].ColumnName;
gv.Columns.Add(bf);
}
gv.DataSource = dt;
gv.DataBind();
for (int i = 0; i < dt.Rows.Count; i++)
...{
gv.Rows[i].Cells[2].ForeColor = System.Drawing.Color.Red;
string address = dt.Rows[i][2].ToString();
gv.Rows[i].Cells[2].Attributes.Add("onMouseover","showTip(event,'"+address+"')");
gv.Rows[i].Cells[2].Attributes.Add("onMouseout", "hidTip(event)");
}
divshow.Controls.Add(gv);
}
异步操作类:DbOp.cs
public class DbOp
...{
public DbOp()
...{
//
//TODO: 在此处添加构造函数逻辑
//
}
[AjaxPro.AjaxMethod]
public static string getDetail(string address)
...{
string sql = "select * from test where address='"+address+"'";
DAL.ISDApp01 cDal = new DAL.ISDApp01();
DataTable dt = cDal.ExecuteQuery(sql).Tables[0];
string id = dt.Rows[0][0].ToString();
string name = dt.Rows[0][1].ToString();
string s = id + "," + name;
return s;
}
}
同时要注意,要使用这个ajaxpro.dll组件,首先要添加引用ajax.pro.2.dll
然后在web.config的httpHandlers中,加入
<httpHandlers>
<!-- Register the ajaxpro for .NET 2.0 handler -->
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
相关文章推荐
- 在GridView中为特定的信息加色,鼠标放上后显示详细信息(转)
- 如何让GridView过长数据缩写,当鼠标停留时显示详细信息...
- ArcEngine二次开发_02(鼠标移过图层中显示特定的属性信息)
- 鼠标滑过按钮显示详细信息
- 鼠标悬停显示详细信息效果
- js实现鼠标移上去显示详细信息
- 点击GridView的某行,显示该行的详细信息
- asp.net GridView列数据鼠标移入显示提示信息
- 鼠标移动到热点上,显示详细信息
- 鼠标经过显示按钮的详细信息
- gridview中把字段超出范围的用...代替 但前台文本提示效果需显示详细信息
- js菜单栏(以鼠标悬停到头像显示详细信息为例)
- 自定义DevExpress GridView Group时显示项目详细信息
- Gridview相关颜色显示(满足特定数据要求的颜色显示,鼠标事件颜色显示)
- 用windows media player打开mp3文件时提示,找不到指定模块;并且鼠标指向音乐文件时不能显示详细的文件信息,如位速等
- asp.net中GridView数据鼠标移入显示提示信息
- 鼠标滑过列表文字显示图片及详细信息信息信息 visual studio 08
- ext3.0中, 要实现将鼠标放在一个单元格的时候,会出现一个浮框,显示了这条记录中的某个字段的详细信息.
- .Net有关问题。在GridView中添加了一个HyperLinkField,用来显示显示详细信息,请教跳转后的详细信息页面该怎样写代码
- 鼠标移动在文字上面,让其显示详细信息