Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)delvpublished in(发表于) 2014/1/16 9:33:43 扩展GridView(五)——固定表头、指定行或指定列_[Asp.Net教程]
GridView既强大又好用。为了让它更强大、更好用,我们来写一个继承自GridView的控件。 [源码下载] http://files.cnblogs.com/webabcd/yycontrols.rar
扩展GridView(五)——固定表头、指定行或指定列
介绍 平时使用GridView的时候会有固定表头、指定行或指定列的需求,就像Excel冻结行、列那样。其实我们可以用CSS来搞定。扩展一下GridView,通过设置几个属性来达到这样的功能。
控件开发 1、新建一个继承自GridView的类。 复制C#代码保存代码/// /// 继承自GridView/// [ToolboxData(@"<{0}:SmartGridView runat='server'>{0}:SmartGridView>")]public class SmartGridView : GridView{}2、新建一个FixRowCol类,有五个属性 复制C#代码保存代码using System;using System.Collections.Generic;using System.Text;
using System.ComponentModel;
namespace YYControls.SmartGridView{ /// /// 固定表头、指定行或指定列的属性类 /// [TypeConverter(typeof(ExpandableObjectConverter))] public class FixRowCol { private bool _isFixHeader; /// /// 固定表头否? /// [Description("固定表头否?"), Category("扩展"), DefaultValue(false), NotifyParentProperty(true)] public virtual bool IsFixHeader { get { return _isFixHeader; } set { _isFixHeader = value; } }
private string _fixRowIndices; /// /// 需要固定的行的索引(用逗号“,”分隔) /// [Description("需要固定的行的索引(用逗号“,”分隔)"), Category("扩展"), NotifyParentProperty(true)] public virtual string FixRowIndices { get { return _fixRowIndices; } set { _fixRowIndices = value; } }
private string _fixColumnIndices; /// /// 需要固定的列的索引(用逗号“,”分隔) /// [Description("需要固定的列的索引(用逗号“,”分隔)"), Category("扩展"), NotifyParentProperty(true)] public virtual string FixColumnIndices { get { return _fixColumnIndices; } set { _fixColumnIndices = value; } }
private System.Web.UI.WebControls.Unit _tableWidth; /// /// 表格的宽度 /// [Description("表格的宽度"), Category("扩展"), NotifyParentProperty(true)] public System.Web.UI.WebControls.Unit TableWidth { get { return _tableWidth; } set { _tableWidth = value; } }
private System.Web.UI.WebControls.Unit _tableHeight; /// /// 表格的高度 /// [Description("表格的高度"), Category("扩展"), NotifyParentProperty(true)] public System.Web.UI.WebControls.Unit TableHeight { get { return _tableHeight; } set { _tableHeight = value; } }
/// /// ToString(); /// /// public override string ToString() { return "FixRowCol"; } }}3、在继承自GridView的类中加一个复杂对象属性,该复杂对象就是第2步创建的那个FixRowCol 复制C#代码保存代码private FixRowCol _fixRowCol;/// /// 固定表头、指定行或指定列/// [Description("固定表头、指定行或指定列"),Category("扩展"),DefaultValue(""),DesignerSerializationVisibility(DesignerSerializationVisibility.Content),PersistenceMode(PersistenceMode.InnerProperty)]public virtual FixRowCol FixRowCol{ get { if (_fixRowCol == null) { _fixRowCol = new FixRowCol(); } return _fixRowCol; }}4、在继承自GridView的那个类的构造函数内加一个RowDataBound事件的处理,在该事件内设置每个单元格的样式,以实现固定表头、指定行或指定列的功能。 复制C#代码保存代码/// /// 构造函数/// public SmartGridView() : base(){ // 新增“SmartGridView_RowDataBound”事件处理 this.RowDataBound += new GridViewRowEventHandler(SmartGridView_RowDataBound);}
/// /// RowDataBound事件/// /// sender/// eprotected void SmartGridView_RowDataBound(object sender, GridViewRowEventArgs e){ SmartGridView sgv = (SmartGridView) sender;
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;"); } } } }}5、重写GridView的Render方法,将GridView用一个div包裹起来。 复制C#代码保存代码/// /// Render/// /// 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(" + FixRowCol.TableWidth.ToString() + "; height: " + FixRowCol.TableHeight.ToString() + "; position: relative;\">"); } base.Render(writer); // 结束 if (!FixRowCol.TableWidth.IsEmpty || !FixRowCol.TableHeight.IsEmpty) { writer.Write(""); }}控件使用 添加这个控件到工具箱里,然后拖拽到webform上,设置其FixRowCol下的5个属性即可。IsFixHeader是固定表头否?;FixRowIndices是需要固定的行的索引(用逗号“,”分隔);FixColumnIndices是需要固定的列的索引(用逗号“,”分隔);TableWidth是表格的宽度;TableHeight是表格的高度 ObjData.cs 复制C#代码保存代码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;/// /// OjbData 的摘要说明/// public class OjbData{ public OjbData() { // // TOD 在此处添加构造函数逻辑 // } [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 复制ASPX代码保存代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> SmartGridView测试 DataSourceID="ObjectDataSource1" Width="100%"> TableWidth="300px" /> TypeName="OjbData"> 转自【webabcd-.NET】 赞 If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长) QQ:154298438 QQ:417480759
base.Render(writer);
//
控件使用 添加这个控件到工具箱里,然后拖拽到webform上,设置其FixRowCol下的5个属性即可。IsFixHeader是固定表头否?;FixRowIndices是需要固定的行的索引(用逗号“,”分隔);FixColumnIndices是需要固定的列的索引(用逗号“,”分隔);TableWidth是表格的宽度;TableHeight是表格的高度 ObjData.cs 复制C#代码保存代码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;
/// /// OjbData 的摘要说明/// public class OjbData{ public OjbData() { // // TOD 在此处添加构造函数逻辑 // }
[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 复制ASPX代码保存代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
SmartGridView测试 DataSourceID="ObjectDataSource1" Width="100%"> TableWidth="300px" /> TypeName="OjbData">
转自【webabcd-.NET】
赞