posts - 615, comments - 10490, trackbacks - 594, articles - 0
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

扩展GridView控件(1) - 鼠标经过行时改变行的样式

Posted on 2006-12-25 09:01 webabcd 阅读(...) 评论(...) 编辑 收藏
GridView既强大又好用。为了让它更强大、更好用,我们来写一个继承自GridView的控件。
[索引页]
[源码下载]


扩展GridView控件(1) - 鼠标经过行时改变行的样式


作者:webabcd


/*正式版的实现 开始*/

介绍
扩展GridView控件:
鼠标经过行的时候改变该行的样式,鼠标离开行的时候恢复该行的样式

使用方法(设置属性):
MouseOverCssClass - 鼠标经过行时行的 CSS 类名


关键代码
/*鼠标经过行时改变行的样式 开始*/
var yy_sgv_originalCssClassName = ''; // 初始样式

function yy_sgv_changeMouseOverCssClass(obj, cssClassName)
{
/// <summary>鼠标经过时改变样式</summary>

    
if (arguments.length == 1)
    
{
        yy_sgv_changeCssClass(obj, yy_sgv_originalCssClassName);
        yy_sgv_originalCssClassName 
= '';
    }

    
else
    
{
        yy_sgv_originalCssClassName 
= obj.className;
        yy_sgv_changeCssClass(obj, cssClassName);
    }

}

/*鼠标经过行时改变行的样式 结束*/

/*正式版的实现 结束*/


/*测试版的实现 开始*/

介绍
我们一般是通过在RowDataBound事件里编码的方式实现GridView的鼠标经过行时改变行的样式的功能。但是每次都这样做比较麻烦。所以我们来开发一个继承自GridView的控件,以扩展它的功能。通过设置其CssClassMouseOver属性来实现这样的功能。


控件开发
1、新建一个继承自GridView的类。
/// <summary>
/// 继承自GridView
/// </summary>

[ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public class SmartGridView : GridView
{
}

2、加一个属性,用来指定鼠标经过行时,行的css类名
        private string _cssClassMouseOver;
        
/// <summary>
        
/// 鼠标经过的样式 CSS 类名
        
/// </summary>

        [Browsable(true)]
        [Description(
"鼠标经过的样式 CSS 类名")]
        [DefaultValue(
"")]
        [Category(
"扩展")]
        
public virtual string CssClassMouseOver
        
{
            
get return _cssClassMouseOver; }
            
set { _cssClassMouseOver = value; }
        }


3、重写OnRowDataBound实现鼠标经过行时改变行的样式的功能。主要是给<tr>增加onmouseover事件和onmouseout事件。
        /// <summary>
        
/// OnRowDataBound
        
/// </summary>
        
/// <param name="e"></param>

        protected override void OnRowDataBound(GridViewRowEventArgs e)
        
{
            
if (e.Row.RowType == DataControlRowType.DataRow)
            
{
                
// _cssClassMouseOver不是空则执行
                if (!string.IsNullOrEmpty(this._cssClassMouseOver))
                
{
                    
// 在<tr>上onmouseover时<tr>的样式(css类名)
                    e.Row.Attributes.Add("onmouseover""this.className = '" + this._cssClassMouseOver + "'");

                    
// 样式的名称(css类名)
                    string cssClassMouseOut = "";

                    
// 根据RowState的不同,onmouseout时<tr>的不同样式(css类名)
                    switch (e.Row.RowState)
                    
{
                        
case DataControlRowState.Alternate:
                            cssClassMouseOut 
= base.AlternatingRowStyle.CssClass;
                            
break;
                        
case DataControlRowState.Edit:
                            cssClassMouseOut 
= base.EditRowStyle.CssClass;
                            
break;
                        
case DataControlRowState.Normal:
                            cssClassMouseOut 
= base.RowStyle.CssClass;
                            
break;
                        
case DataControlRowState.Selected:
                            cssClassMouseOut 
= base.SelectedRowStyle.CssClass;
                            
break;
                        
default:
                            cssClassMouseOut 
= "";
                            
break;
                    }


                    
// 增加<tr>的dhtml事件onmouseout
                    e.Row.Attributes.Add("onmouseout""this.className = '" + cssClassMouseOut + "'");
                }

            }


            
base.OnRowDataBound(e);
        }



控件使用
添加这个控件到工具箱里,然后拖拽到webform上,设置其CssClassMouseOver属性即可

aspx文件
<yyc:SmartGridView ID="sgvList" runat="server">
</yyc:SmartGridView>

css文件
.over 
{
    background-color 
: Red;
}


skin文件
<yyc:SmartGridView runat="server" CssClassMouseOver="over">
</yyc:SmartGridView>


注:其实最好的实现办法应该如下,但是因为之后我针对GridView扩展的其他功能可能会与此有冲突,所以没这么用。
        /// <summary>
        
/// 构造函数
        
/// </summary>

        public SmartGridView()
        
{
            
this.PreRender += new EventHandler(SmartGridView_PreRender);
        }


        
/// <summary>
        
/// PreRender
        
/// </summary>
        
/// <param name="sender">sender</param>
        
/// <param name="e">e</param>

        void SmartGridView_PreRender(object sender, EventArgs e)
        
{
            
if (!string.IsNullOrEmpty(this._cssClassMouseOver))
            
{
                
// 注册一个客户端变量
                if (!Page.ClientScript.IsClientScriptBlockRegistered("jsRowClass"))
                
{
                    Page.ClientScript.RegisterClientScriptBlock(
                        
this.GetType(),
                        
"jsRowClass",
                        
@"<script type=""text/javascript"">var yy_RowClass</script>"
                        );
                }

            }

        }


        
/// <summary>
        
/// OnRowDataBound
        
/// </summary>
        
/// <param name="e"></param>

        protected override void OnRowDataBound(GridViewRowEventArgs e)
        
{

            
if (e.Row.RowType == DataControlRowType.DataRow)
            
{
                
// _cssClassMouseOver不是空则执行
                if (!string.IsNullOrEmpty(this._cssClassMouseOver))
                
{
                    e.Row.Attributes.Add(
"onmouseover""yy_RowClass=this.className;this.className='" + _cssClassMouseOver + "'");
                    e.Row.Attributes.Add(
"onmouseout""this.className=yy_RowClass");
                }

            }


            
base.OnRowDataBound(e);
        }

/*测试版的实现 结束*/


OK
[源码下载]