用户提出了这样一个需求:把测试数据和标准数据比较,对于大于标准数据的部分在网格中用红色表示出来,并且当鼠标放到这个数据上后,能在旁边显示详细信息(为什么超出标准等?)
要实现这样的效果,对于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 >
< 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 >
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);
}
... {
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);
}
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;
}
}
... {
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;
}
}
然后在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 >
<!-- Register the ajaxpro for .NET 2.0 handler -->
< add verb ="POST,GET" path ="ajaxpro/*.ashx" type ="AjaxPro.AjaxHandlerFactory, AjaxPro.2" />
</ httpHandlers >