DataGrid鼠标事件处理

最新推荐文章于 2022-11-15 09:57:57 发布

原创最新推荐文章于 2022-11-15 09:57:57 发布 · 764 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #function #null #object

ASP.NET 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个简单的DataGrid交互样式实现方案，通过JavaScript控制表格行在鼠标悬停、点击及双击时的颜色变化，并展示了如何在ASP.NET Web Forms环境中进行数据绑定。

完成功能是DataGrid的页面选中事件、鼠标事件、双击事件改变TR的色彩。代码很简单，只是一点JS操作。 JS文件:GridControl.js ============================= /*------------ DataGrid鼠标事件处理 ------------ 功能:用于数据梆定后鼠标事件参数说明: obj:对像this fontColor:字体颜色 backColor:背景颜色 ----------------------------------------------*/ var objState //------------鼠标经过时----------- function OnFoucsMouseOver( obj,fontColor,backColor ) { if ( obj.rowIndex > 0 ) { obj.style.color = fontColor; obj.style.backgroundColor = backColor; } } //-----------鼠标离开时----------- function OnFoucsMouseOut( obj,fontColor,backColor ) { if ( obj.rowIndex > 0 ) { if ( obj != objState ) { obj.style.color = fontColor; obj.style.backgroundColor = backColor; } } } //-----------鼠标单击时----------- function OnFoucsClick( obj,fontColor,backColor ) { if ( obj.rowIndex > 0 ) { if ( objState != null ) { objState.style.color = ""; objState.style.backgroundColor = ""; } obj.style.color = fontColor; obj.style.backgroundColor = backColor; objState = obj; } } //-----------鼠标双击时----------- function OnFoucsDbClick( obj,fontColor,backColor,openUrl ) { //参数openUrl为要开的新窗口的地址 if ( obj.rowIndex > 0 ) { if ( objState != null ) { objState.style.color = ""; objState.style.backgroundColor = ""; } obj.style.color = fontColor; obj.style.backgroundColor = backColor; objState = obj; window.open( openUrl ); } } ========================================== 后台数据梆定例子： ========================================== private void dgList_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { // if ( e.Item.ItemIndex != -1 ) { e.Item.Attributes.Add( "onMouseOver","OnFoucsMouseOver(this,'#FFFFFF','#000000');" ); e.Item.Attributes.Add( "onMouseOut","OnFoucsMouseOut(this,'#000000','#FFFFFF');" ); e.Item.Attributes.Add( "onClick","OnFoucsClick( this,'#FFFFFF','#000000' );" ); e.Item.Attributes.Add( "onDblClick","OnFoucsDbClick( this,'#FFFFFF','#000000','about:bank' );" ); } } ========================================== 前台.aspx页面调用JS文件：