扩展GridView控件(5) - 固定指定行、指定列

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

作者： webabcd

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

介绍
扩展GridView控件：
固定指定行、指定列，根据RowType固定行，根据RowState固定行

使用方法（设置FixRowColumn复合属性）：
FixRowType - 需要固定的行的RowType（用逗号“,”分隔）
FixRowState - 需要固定的行的RowState（用逗号“,”分隔）
FixRows - 需要固定的行的索引（用逗号“,”分隔）
FixColumns - 需要固定的列的索引（用逗号“,”分隔）
TableWidth - 表格的宽度
TableHeight - 表格的高度

关键代码
css

/*固定行*/

.yy_sgv_fixRow

{

position: relative; top: expression(this.offsetParent.scrollTop - 1);

}

/*固定列*/

.yy_sgv_fixCol

{

position: relative; left: expression(this.offsetParent.scrollLeft - 1);

}

/*高优先级的固定*/

.yy_sgv_fixHigh

{

z-index: 9999;

}

/*低优先级的固定*/

.yy_sgv_fixLow

{

z-index: 1000;

}

using System;

using System.Collections.Generic;

using System.Text;

using System.Web.UI.WebControls;

using System.Web.UI;

namespace YYControls.SmartGridViewFunction

{

/// <summary>

/// 扩展功能：固定指定行、指定列

/// </summary>

public class FixRowColumnFunction : ExtendFunction

{

/// <summary>

/// 构造函数

/// </summary>

public FixRowColumnFunction()

: base()

{

}

/// <summary>

/// 构造函数

/// </summary>

/// <param name="sgv">SmartGridView对象</param>

public FixRowColumnFunction(SmartGridView sgv)

: base(sgv)

{

}

/// <summary>

/// 扩展功能的实现

/// </summary>

protected override void Execute()

{

this._sgv.RowDataBoundCell += new SmartGridView.RowDataBoundCellHandler(_sgv_RowDataBoundCell);

this._sgv.RenderBegin += new SmartGridView.RenderBeginHandler(_sgv_RenderBegin);

this._sgv.RenderEnd += new SmartGridView.RenderEndHandler(_sgv_RenderEnd);

}

/// <summary>

/// SmartGridView的RowDataBoundCell事件

/// </summary>

/// <param name="sender"></param>

/// <param name="gvtc"></param>

void _sgv_RowDataBoundCell(object sender, GridViewTableCell gvtc)

{

TableCell tc = gvtc.TableCell;

GridViewRow gvr = (GridViewRow)tc.Parent;

int i = 0; // 0-既不固定行也不固定列；1-固定行或固定列；2-既固定行也固定列

// 固定行

(

!String.IsNullOrEmpty(this._sgv.FixRowColumn.FixRows)

Array.Exists(this._sgv.FixRowColumn.FixRows.Split(','), delegate(string s) { return s == gvr.RowIndex.ToString(); })

)

(

!String.IsNullOrEmpty(this._sgv.FixRowColumn.FixRowType)

Array.Exists(this._sgv.FixRowColumn.FixRowType.Split(','), delegate(string s) { return s == gvr.RowType.ToString(); })

)

(

!String.IsNullOrEmpty(this._sgv.FixRowColumn.FixRowState)

Array.Exists(this._sgv.FixRowColumn.FixRowState.Split(','), delegate(string s) { return s == gvr.RowState.ToString(); })

)

{

i++;

Helper.Common.SetAttribute(tc, "class", "yy_sgv_fixRow", AttributeValuePosition.Last, ' ');

}

// 固定列

(

!String.IsNullOrEmpty(this._sgv.FixRowColumn.FixColumns)

Array.Exists(this._sgv.FixRowColumn.FixColumns.Split(','), delegate(string s) { return s == gvtc.ColumnIndex.ToString(); })

)

{

i++;

Helper.Common.SetAttribute(tc, "class", "yy_sgv_fixCol", AttributeValuePosition.Last, ' ');

}

// 低等级的z-index

if (i == 1)

{

Helper.Common.SetAttribute(tc, "class", "yy_sgv_fixLow", AttributeValuePosition.Last, ' ');

}

// 高等级的z-index

else if (i == 2)

{

Helper.Common.SetAttribute(tc, "class", "yy_sgv_fixHigh", AttributeValuePosition.Last, ' ');

}

/// <summary>

/// RenderBegin

/// </summary>

/// <param name="sender"></param>

/// <param name="writer"></param>

void _sgv_RenderBegin(object sender, HtmlTextWriter writer)

{

writer.AddStyleAttribute(HtmlTextWriterStyle.Overflow, "auto");

writer.AddStyleAttribute(HtmlTextWriterStyle.Position, "relative");

writer.AddStyleAttribute(HtmlTextWriterStyle.Width, String.IsNullOrEmpty(this._sgv.FixRowColumn.TableWidth) ? "100%" : this._sgv.FixRowColumn.TableWidth);

writer.AddStyleAttribute(HtmlTextWriterStyle.Height, String.IsNullOrEmpty(this._sgv.FixRowColumn.TableHeight) ? "100%" : this._sgv.FixRowColumn.TableHeight);

writer.RenderBeginTag(HtmlTextWriterTag.Div);

}

/// <summary>

/// RenderEnd

/// </summary>

/// <param name="sender"></param>

/// <param name="writer"></param>

void _sgv_RenderEnd(object sender, HtmlTextWriter writer)

{

writer.RenderEndTag();

}

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

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

介绍
平时使用GridView的时候会有固定表头、指定行或指定列的需求，就像Excel冻结行、列那样。其实我们可以用CSS来搞定。扩展一下GridView，通过设置几个属性来达到这样的功能。

控件开发
1、新建一个继承自GridView的类，另外为了保持滚动条状态，还要继承IPostBackDataHandler接口

/// <summary>

/// 继承自GridView

/// </summary>

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

public class SmartGridView : GridView, IPostBackDataHandler

{

}

2、新建一个FixRowCol类，有七个属性

using System;

using System.Collections.Generic;

using System.Text;

using System.ComponentModel;

namespace YYControls.SmartGridView

{

/// <summary>

/// 固定表头、指定行或指定列的实体类

/// </summary>

[TypeConverter(typeof(ExpandableObjectConverter))]

public class FixRowCol

{

private bool _isFixHeader;

/// <summary>

/// 固定表头否？

/// </summary>

[Description("固定表头否？"), Category("扩展"), DefaultValue(false), NotifyParentProperty(true)]

public virtual bool IsFixHeader

{

get { return _isFixHeader; }

set { _isFixHeader = value; }

}

private bool _isFixPager;

/// <summary>

/// 固定分页行否？

/// </summary>

[Description("固定分页行否？"), Category("扩展"), DefaultValue(false), NotifyParentProperty(true)]

public virtual bool IsFixPager

{

get { return _isFixPager; }

set { _isFixPager = value; }

}

private string _fixRowIndices;

/// <summary>

/// 需要固定的行的索引（用逗号“,”分隔）

/// </summary>

[Description("需要固定的行的索引（用逗号“,”分隔）"), Category("扩展"), NotifyParentProperty(true)]

public virtual string FixRowIndices

{

get { return _fixRowIndices; }

set { _fixRowIndices = value; }

}

private string _fixColumnIndices;

/// <summary>

/// 需要固定的列的索引（用逗号“,”分隔）

/// </summary>

[Description("需要固定的列的索引（用逗号“,”分隔）"), Category("扩展"), NotifyParentProperty(true)]

public virtual string FixColumnIndices

{

get { return _fixColumnIndices; }

set { _fixColumnIndices = value; }

}

private System.Web.UI.WebControls.Unit _tableWidth;

/// <summary>

/// 表格的宽度

/// </summary>

[Description("表格的宽度"), Category("扩展"), NotifyParentProperty(true)]

public System.Web.UI.WebControls.Unit TableWidth

{

get { return _tableWidth; }

set { _tableWidth = value; }

}

private System.Web.UI.WebControls.Unit _tableHeight;

/// <summary>

/// 表格的高度

/// </summary>

[Description("表格的高度"), Category("扩展"), NotifyParentProperty(true)]

public System.Web.UI.WebControls.Unit TableHeight

{

get { return _tableHeight; }

set { _tableHeight = value; }

}

private bool _enableScrollState;

/// <summary>

/// 是否保持滚动条的状态

/// </summary>

[Description("是否保持滚动条的状态"), Category("扩展"), DefaultValue(false), NotifyParentProperty(true)]

public bool EnableScrollState

{

get { return _enableScrollState; }

set { _enableScrollState = value; }

}

/// <summary>

/// ToString();

/// </summary>

/// <returns></returns>

public override string ToString()

{

return "FixRowCol";

}

3、在继承自GridView的类中加一个复杂对象属性，该复杂对象就是第2步创建的那个FixRowCol

private FixRowCol _fixRowCol;

/// <summary>

/// 固定表头、指定行或指定列

/// </summary>

[

Description( " 固定表头、指定行或指定列 " ),

Category( " 扩展 " ),

DefaultValue( "" ),

DesignerSerializationVisibility(DesignerSerializationVisibility.Content),

PersistenceMode(PersistenceMode.InnerProperty)

]

public virtual FixRowCol FixRowCol

{

get

{

if (_fixRowCol == null)

{

_fixRowCol = new FixRowCol();

}

return _fixRowCol;

}

4、重写OnRowDataBound以设置每个单元格的样式，从而实现固定表头、指定行或指定列的功能。

/// <summary>

/// OnRowDataBound

/// </summary>

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

protected override void OnRowDataBound(GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.Pager)

{

if (FixRowCol.IsFixPager)

{

if (this.PagerSettings.Position == PagerPosition.Top || (this.PagerSettings.Position == PagerPosition.TopAndBottom && _isTopPager))

{

// TopPager固定行和列

e.Row.Cells[0].Attributes.Add("style", "z-index:999; position: relative; top: expression(this.offsetParent.scrollTop); left: expression(this.offsetParent.scrollLeft);");

// 现在是TopPager，之后就是BottomPager了，所以设置_isTopPager为false

_isTopPager = false;

}

else if (this.PagerSettings.Position == PagerPosition.TopAndBottom && !_isTopPager)

{

// BottomPager只固定列

e.Row.Cells[0].Attributes.Add("style", "z-index:999; position: relative; left: expression(this.offsetParent.scrollLeft);");

// 现在是BottomPager，之后就是TopPager了，所以设置_isTopPager为true

_isTopPager = true;

}

if (e.Row.RowType == DataControlRowType.DataRow || e.Row.RowType == DataControlRowType.Header)

{

// 给每一个指定固定的列的单元格加上css属性

if (!String.IsNullOrEmpty(FixRowCol.FixColumnIndices))

{

// 列索引

foreach (string s in FixRowCol.FixColumnIndices.Split(','))

{

int i;

if (!Int32.TryParse(s, out i))

throw new ArgumentException("FixColumnIndices", "含有非整形的字符");

if (i > e.Row.Cells.Count)

throw new ArgumentOutOfRangeException("FixColumnIndices", "溢出");

e.Row.Cells[i].Attributes.Add("style", "position: relative; left: expression(this.offsetParent.scrollLeft);");

}

bool isFixRow = false; // 当前行是否固定

if (FixRowCol.IsFixHeader && e.Row.RowType == DataControlRowType.Header)

{

isFixRow = true;

}

if (!String.IsNullOrEmpty(FixRowCol.FixRowIndices) && e.Row.RowType == DataControlRowType.DataRow)

{

// 行索引

foreach (string s in FixRowCol.FixRowIndices.Split(','))

{

int i;

if (!Int32.TryParse(s, out i))

throw new ArgumentException("FixRowIndices", "含有非整形的字符");

if (i > e.Row.Cells.Count)

throw new ArgumentOutOfRangeException("FixRowIndices", "溢出");

if (i == e.Row.RowIndex)

{

isFixRow = true;

break;

}

// 固定该行

if (isFixRow)

{

// 该行的每一个单元格

for (int j = 0; j < e.Row.Cells.Count; j++)

{

// 该单元格不属于固定列

if (String.IsNullOrEmpty(e.Row.Cells[j].Attributes["style"]) || e.Row.Cells[j].Attributes["style"].IndexOf("position: relative;") == -1)

{

e.Row.Cells[j].Attributes.Add("style", " position: relative; top: expression(this.offsetParent.scrollTop);");

}

// 该单元格属于固定列

else

{

e.Row.Cells[j].Attributes.Add("style", e.Row.Cells[j].Attributes["style"] + "top: expression(this.offsetParent.scrollTop); z-index: 666;");

}

base.OnRowDataBound(e);

}

5、增加两个私有变量

/// <summary>

/// 如果固定行、列的话滚动条的x位置

/// </summary>

private int _yy_SmartGridView_x;

/// <summary>

/// 如果固定行、列的话滚动条的y位置

/// </summary>

private int _yy_SmartGridView_y;

6、重写GridView的OnPreRender方法，用于注册两个HiddenField，以及注册设置GridView的滚动条的位置的javascript代码

/// <summary>

/// OnPreRender

/// </summary>

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

protected override void OnPreRender(EventArgs e)

{

if (FixRowCol.EnableScrollState)

{

// 滚动条x位置

Page.ClientScript.RegisterHiddenField("yy_SmartGridView_x", _yy_SmartGridView_x.ToString());

// 滚动条y位置

Page.ClientScript.RegisterHiddenField("yy_SmartGridView_y", _yy_SmartGridView_y.ToString());

// 设置GridView的滚动条的位置

Page.ClientScript.RegisterStartupScript(

this.GetType(),

"jsSetScroll", "<script type=\"text/javascript\">document.getElementById('yy_ScrollDiv').scrollLeft=" + _yy_SmartGridView_x + ";document.getElementById('yy_ScrollDiv').scrollTop=" + _yy_SmartGridView_y + ";</script>"

);

// 将控件注册为要求在页回发至服务器时进行回发处理的控件

if (Page != null) Page.RegisterRequiresPostBack(this);

}

base.OnPreRender(e);

}

7、重写GridView的Render方法，将GridView用一个div包裹起来。

/// <summary>

/// Render

/// </summary>

/// <param name="writer"></param>

protected override void Render(HtmlTextWriter writer)

{

// 给GridView一个容器 <div>

if (!FixRowCol.TableWidth.IsEmpty || !FixRowCol.TableHeight.IsEmpty)

{

if (FixRowCol.TableWidth.IsEmpty) FixRowCol.TableWidth = new Unit(100, UnitType.Percentage);

if (FixRowCol.TableHeight.IsEmpty) FixRowCol.TableHeight = new Unit(100, UnitType.Percentage);

writer.Write("<div id='yy_ScrollDiv' style=\"overflow: auto; width: "

+ FixRowCol.TableWidth.ToString() + "; height: "

+ FixRowCol.TableHeight.ToString() + "; position: relative;\" ");

// 如果保持滚动条的状态的话，用隐藏字段记录滚动条的位置

if (FixRowCol.EnableScrollState)

{

writer.Write("onscroll=\"document.getElementById('yy_SmartGridView_x').value = this.scrollLeft; document.getElementById('yy_SmartGridView_y').value = this.scrollTop;\">");

}

else

{

writer.Write(">");

}

base.Render(writer);

// </div> 结束

if (!FixRowCol.TableWidth.IsEmpty || !FixRowCol.TableHeight.IsEmpty)

{

writer.Write("</div>");

}

8、获取存储了滚条位置信息的HiddenField的值

void IPostBackDataHandler.RaisePostDataChangedEvent()

{

}

bool IPostBackDataHandler.LoadPostData( string postDataKey, NameValueCollection postCollection)

{

// 获取两个保存了固定行、列后的GridView滚动条的位置信息

_yy_SmartGridView_x = String.IsNullOrEmpty(postCollection["yy_SmartGridView_x"]) ? 0 : Convert.ToInt32(postCollection["yy_SmartGridView_x"]);

_yy_SmartGridView_y = String.IsNullOrEmpty(postCollection["yy_SmartGridView_y"]) ? 0 : Convert.ToInt32(postCollection["yy_SmartGridView_y"]);

return false;

}

控件使用
添加这个控件到工具箱里，然后拖拽到webform上，设置其FixRowCol下的7个属性即可。IsFixHeader是固定表头否？；IsFixPager是固定分页行否？；FixRowIndices是需要固定的行的索引（用逗号“,”分隔）；FixColumnIndices是需要固定的列的索引（用逗号“,”分隔）；TableWidth是表格的宽度；TableHeight是表格的高度；EnableScrollState为是否保持滚动条的状态
ObjData.cs

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.ComponentModel;

/// <summary>

/// OjbData 的摘要说明

/// </summary>

public class OjbData

{

public OjbData()

{

// TODO: 在此处添加构造函数逻辑

}

[DataObjectMethod(DataObjectMethodType.Select, true)]

public DataTable Select()

{

DataTable dt = new DataTable();

dt.Columns.Add("no", typeof(string));

dt.Columns.Add("name", typeof(string));

for (int i = 0; i < 30; i++)

{

DataRow dr = dt.NewRow();

dr[0] = "no" + i.ToString().PadLeft(2, '0');

dr[1] = "name" + i.ToString().PadLeft(2, '0');

dt.Rows.Add(dr);

}

return dt;

}

Default.aspx

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head id ="Head1" runat ="server" >

< title > SmartGridView测试 </ title >

</ head >

< body >

< form id ="form1" runat ="server" >

< yyc:SmartGridView ID ="SmartGridView1" runat ="server" AutoGenerateColumns ="False"

DataSourceID ="ObjectDataSource1" Width ="1000px" >

< Columns >

< asp:BoundField DataField ="no" HeaderText ="序号" SortExpression ="no" />