在呈现数据时使C1WebGrid可以对当前鼠标指定的行突出显示可以带来很好的用户体验,更重要的是这个功能实现起来也不是很困难,下面来介绍其中的一个实现方法.采用的语言是ASP.NET(C#)和Javascript.
首先定义两个Javascript函数来控制指定项目的背景色,其定义如下:
//鼠标指向时调用
function MouseOn(startIndex,colcount,cm)
{
var ID;
for(var j=startIndex;j<colcount;j++)
{
ID="a"+j+cm;
eval(ID+".style.background='#CCCC66'");
eval(ID+".style.cursor='hand'");
}
}
//鼠标离开时调用
function MouseOut(startIndex,colcount,cm,indx)
{
var ID;
var precolor;
precolor="#D3D3D3";//记录该行原来的颜色
//由于我的Grid相邻行是用不同颜色显示的
//所以如果行号是双数,使用下面的颜色
if (indx % 2==0)
{
precolor="#F5F5F5";
}
//设置对象属性
for(var j=startIndex;j<colcount;j++)
{
ID="a"+j+cm;
eval(ID+".style.background='"+precolor+"'");
}
}
添加对上面函数的调用
//在ItemDataBound函数中添加处理
protected void C1WGridResult_ItemDataBound(object sender, C1.Web.C1WebGrid.C1ItemEventArgs e)
{
///改变背景颜色
//如果当前行不是WebGrid的Header也不是Footer
if (e.Item.ItemType != C1.Web.C1WebGrid.C1ListItemType.Header && e.Item.ItemType != C1.Web.C1WebGrid.C1ListItemType.Footer)
{
//定义一个可以唯一表示当前行的字符串,这里使用的是该行的客户端id
string cm = e.Item.ClientID;
//指定该行包含的单元格数
Int32 colcount = e.Item.Cells.Count;
//指定从第几个单元格开始作用,这里主要是为了处理前面有合并列的情况,不然就不用一个一个格的处理了.
Int32 startIndex = 1;
for (int idx = startIndex; idx < e.Item.Cells.Count; idx ++)
{
//为每个单元格指定id,这里的名字可以随便起的
e.Item.Cells[idx ].Attributes.Add("id", "a" + idx .ToString() + cm);
//为当前单元格指定onmouseover的处理函数
e.Item.Cells[idx ].Attributes.Add("onmouseover", "javascript:MouseOn(" + startIndex+ "," + colcount.ToString() + ",'" + c+ "')");
//为当前单元格指定onmouseout的处理函数
e.Item.Cells[idx ].Attributes.Add("onmouseout", "javascript:MouseOut(" + startIndex+ "," + colcount.ToString() + ",'" + c+ "','" + e.Item.ItemIndex + "')");
}
}
}
经过上面的处理后,我们的基本目的就算达到了,当然还有很大的改进空间,这里只是提供一种思路.
首先定义两个Javascript函数来控制指定项目的背景色,其定义如下:
//鼠标指向时调用function MouseOn(startIndex,colcount,cm) { 
var ID; for(var j=startIndex;j<colcount;j++) { 
ID="a"+j+cm; eval(ID+".style.background='#CCCC66'"); eval(ID+".style.cursor='hand'"); } }//鼠标离开时调用 function MouseOut(startIndex,colcount,cm,indx) { var ID; var precolor; precolor="#D3D3D3";//记录该行原来的颜色 //由于我的Grid相邻行是用不同颜色显示的//所以如果行号是双数,使用下面的颜色 if (indx % 2==0) { precolor="#F5F5F5"; } //设置对象属性 for(var j=startIndex;j<colcount;j++) { ID="a"+j+cm; eval(ID+".style.background='"+precolor+"'"); } } 添加对上面函数的调用
//在ItemDataBound函数中添加处理protected void C1WGridResult_ItemDataBound(object sender, C1.Web.C1WebGrid.C1ItemEventArgs e) { ///改变背景颜色//如果当前行不是WebGrid的Header也不是Footer if (e.Item.ItemType != C1.Web.C1WebGrid.C1ListItemType.Header && e.Item.ItemType != C1.Web.C1WebGrid.C1ListItemType.Footer) { //定义一个可以唯一表示当前行的字符串,这里使用的是该行的客户端id string cm = e.Item.ClientID; //指定该行包含的单元格数 Int32 colcount = e.Item.Cells.Count; //指定从第几个单元格开始作用,这里主要是为了处理前面有合并列的情况,不然就不用一个一个格的处理了. Int32 startIndex = 1; for (int idx = startIndex; idx < e.Item.Cells.Count; idx ++) {//为每个单元格指定id,这里的名字可以随便起的 e.Item.Cells[idx ].Attributes.Add("id", "a" + idx .ToString() + cm);//为当前单元格指定onmouseover的处理函数 e.Item.Cells[idx ].Attributes.Add("onmouseover", "javascript:MouseOn(" + startIndex+ "," + colcount.ToString() + ",'" + c+ "')");//为当前单元格指定onmouseout的处理函数 e.Item.Cells[idx ].Attributes.Add("onmouseout", "javascript:MouseOut(" + startIndex+ "," + colcount.ToString() + ",'" + c+ "','" + e.Item.ItemIndex + "')"); } } }经过上面的处理后,我们的基本目的就算达到了,当然还有很大的改进空间,这里只是提供一种思路.
posted on
