GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[源码下载]


扩展GridView控件（一）——鼠标经过行时改变行的样式


介绍
我们一般是通过在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>


OK
[源码下载]



webabcd 2006-12-25 09:01 发表评论

文章来源:http://www.cnblogs.com/webabcd/archive/2006/12/25/602627.html