主要是利用DataGridView中的RowDataBind事件!利用e.Row.Attributes.add();为一行添加一个属性!就是可又添加一个onmouseover 和onmouserout 属性!,来实现当鼠标移动每一行的时候,出现黄色的情况 ,这就是我们学说的荧光棒效果! 还有当我们移动这一行时候显示这行相对于的照片!利用(后台代码中)e.Row.cells[x].text 来得到表中那一列的值!
代码如下:(后台)
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType ==DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "HandleMouseover(this)");//传递当前的参数
e.Row.Attributes.Add("onmouseout", "HandleMouseout(this)");//传递当前的参数
//让价格大于数的时候行显示红色
string price=e.Row.Cells[4].Text;
string [] para=price.Split('.');
e.Row.Cells[4].Text = price.Substring(0, 5);
int pricechange = Convert.ToInt32(para[0]);
if (pricechange > 50)
{
e.Row.BackColor = System.Drawing.Color.Red;
}
}
前台的JS代码:
<script type="text/javascript">
function HandleMouseover(op) {
bgcolor = op.style.backgroundColor;
op.style.backgroundColor = "yellow";
var img = document.getElementById("imgid");
var Div = document.getElementById("showPhoto");
var isbn = op.childNodes[3].innerText;//我们从后台传递的this.在这里表示它代表的行的意思 ,所以可以op.chlidNodes[x].innerText来得到值!innerText 只是得到文本的值 ,innerHtml是得到整个的值(如:<td></td>)
if (Div != null) {
Div.style.display = "";
img.src = "~/images/BookCovers/" + isbn + ".jpg";//用这种相对路径不能正确的表示出来,不知道是怎么一回事!
img.src = "http://images.cnblogs.com/BookCovers/" + isbn + ".jpg";//利用这种情况可又正解得到图片的地址!
}
};
function HandleMouseout(op1) {
op1.style.backgroundColor = bgcolor;
}
</script>
在这里还要强调一下!当我们没有找到图片的时候,我调用onerror这个属性!让它导向我们要的它找不到图片相应提示图片!
<div id="showPhoto" style="display:none"><img id="imgid" οnerrοr="this.src='http://images.cnblogs.com/Common/small2.jpg'"/></div>