在鼠标悬停事件上,Datagrid自定义控件更改行颜色

分享于 

4分钟阅读

Web开发

  繁體

介绍

本文介绍另一个 DataGrid 控件。 DataGrid s 非常灵活,这只是从类 DataGrid 继承并添加鼠标of事件以更改行的颜色作为代码表。 从代码项目中的Chris Maunder表获得了。 我查看了他的JavaScript,并实现了. NET DataGrid 类。

使用代码

这是一个客户控制。 我包括控件的源代码和一个测试项目,如何使用它。 你需要添加对项目的引用,作为任何客户控件。 在ASPX页上:

(...)<MOD:MODataGrid> id="DataGrid1" style="Z-INDEX: 101; 
 LEFT: 320px; POSITION: absolute; TOP: 136px"
 runat="server"></MOD:MODataGrid>

在 aspx.cs 文件添加上:

protected MouseOverDataGrid.MODataGrid DataGrid1;

我在测试项目中使用了 http://asp.net的Datagrid教程示例

控件

来自类的简单 inherit 并使用Chris重写 Render 函数。 这里有 2个 public 属性,SpecialLinkColor 作为默认设置为CodeProject颜色,你可以设置为任何你喜欢的颜色。 OverLinkHand 以将 cursor 显示为手形。 我没有实现 onclick的方法,但是它在JavaScript上,所以你可以始终实现它。

 [assembly:TagPrefix("MouseOverDataGrid", "MOD")]namespace MouseOverDataGrid
{
 ///<summary>/// Summary description for MouseOverDataGrid.///</summary>publicclass MODataGrid : System.Web.UI.WebControls.DataGrid
 { 
 [Category("Design"), Description("OverLink Color")]
 privatestring sBackgroundColor = "#dddddd";
 publicstring SpecialLinkColor
 {
 get{return(sBackgroundColor);}
 set{sBackgroundColor=value;}
 }
 [Category("Design"), Description("OverLink Hand Type")]
 privatebool bOverLinkHand = false;
 publicbool OverLinkHand
 {
 get{return(bOverLinkHand);}
 set{bOverLinkHand=value;}
 }
 protectedoverridevoid Render(System.Web.UI.HtmlTextWriter writer)
 {
 string sDataGridID = this.ID.ToString();
 string sCursor = "";
 if ( OverLinkHand == true )
 sCursor = "elm.style.cursor = Cursor;r";
 string sJavaScript = " <script language="'""javascript"'>r" +
"function ShowRow1(elm, BgColour, FgColour)r" +
"{r" +
"elm.bgColor = BgColour;r" + sCursor +
"}r" +
"function HilightRow(elm, hover, highlight)r" +
"{r" +
"var BgColour = (hover)? "" + SpecialLinkColor + "" :"white";r" +
 " var FgColour ="black";r" +
 " var Cursor = (hover)?"hand" :"auto";r" +
 " ShowRow1(elm, BgColour, FgColour);r" +
 " return false;r" +
 "}r" +
 "function RowOn() { return HilightRow(this, true, false); }r" +
 "function RowOff() { return HilightRow(this, false, false); }r" +
 "function RowClick()r" +
 "{r" +
 " HilightRow(this, false, true);r" +
 " var elm = eval('document.getElementById("' + this.name + '_link")');r" +
 " if (elm) elm.click();r" +
 " return true;r" +
 "}r" +
 "var table = document.getElementById("" + sDataGridID + "");r" +
 "var rows = table.getElementsByTagName("tr");r" +
 "for (var i = 0; i <rows.length; i++) {r" +
 "rows[i].onmouseover = RowOn;r" +
 "rows[i].onmouseout = RowOff;r" +
 //"rows[i].onclick = RowClick;" +"}r</script>r";
 base.Render (writer); 
 base.Page.Response.Write(sJavaScript);
 }
 }

Points of Interest

为了让Datagrid工作,你必须确保在项目 background 上没有添加任何颜色。 如果使用分页,请在页脚中添加相同的颜色。


数据  控制  COL  EVE  event  color  
相关文章