网站建设 常州,南宁手机平台网网站建设,设计本装修,海报设计培训继续看一个简单的ASP.NET应用。
Gridview相信大家使用的比较多了#xff0c;一般对多行数据进行展示和操作都会用到这个控件。而对于表头#xff0c;也是很重要的一部分#xff0c;它负责对数据进行分门别类的。而对于复合表头该如何展示呢#xff1f;这个也挺简单的。
显…继续看一个简单的ASP.NET应用。
Gridview相信大家使用的比较多了一般对多行数据进行展示和操作都会用到这个控件。而对于表头也是很重要的一部分它负责对数据进行分门别类的。而对于复合表头该如何展示呢这个也挺简单的。
显示复合表头一般可以在后台通过代码实现。对于表头是由多个Header控件组成的一般默认的一个Header显示一列。而对于复合表头就是将Header进行设置让它占用多列或者多行。或者增加很多个Header然后每个Header分别占用多列或者多行就可以了。
来看一个复合的表头。 如果只显示一个表头的话是序号 姓名 年龄 性别 行业 职业 经验,
现在又新增个人基本信息和工作信息其实新增的这个表头是两个Header控件它们分别占用3列所以就达到了这样复合表头的效果。来看代码
前台代码 html xmlnshttp://www.w3.org/1999/xhtml
head runatservertitle/title
/head
body idBody1 runatserverform idForm1 runatserverasp:GridView IDdgPersons runatserver EnableViewStatefalse CellPadding4GridLinesHorizontal PageChangeTextBox AutoGenerateColumnsFalse SortModeTotal ForeColor#333333CellSpacing1 Width60% ShowNoRecordTipTrue OnRowCreatedDgPersons_RowCreatedColumnsasp:TemplateFieldItemTemplate%#Container.DataItemIndex 1%input idhideID typehidden runatserver value%#Eval(p_id)% //ItemTemplateHeaderTemplatespan序号/span/HeaderTemplate/asp:TemplateFieldasp:TemplateFieldItemTemplatespan %#Eval(p_name)%/span/ItemTemplateHeaderTemplatespan姓名/span/HeaderTemplate/asp:TemplateFieldasp:TemplateFieldItemTemplatespan %#Eval(p_age)%/span/ItemTemplateHeaderTemplatespan年龄/span/HeaderTemplate/asp:TemplateFieldasp:TemplateFieldItemTemplatespan %#Eval(p_sex)%/span/ItemTemplateHeaderTemplatespan性别/span/HeaderTemplate/asp:TemplateFieldasp:TemplateFieldItemTemplatespan %#Eval(p_industry)%/span/ItemTemplateHeaderTemplatespan行业/span/HeaderTemplate/asp:TemplateFieldasp:TemplateFieldItemTemplatespan %#Eval(p_job)%/span/ItemTemplateHeaderTemplatespan职业/span/HeaderTemplate/asp:TemplateFieldasp:TemplateFieldItemTemplatespan %#Eval(p_experience)%/span/ItemTemplateHeaderTemplatespan经验/span/HeaderTemplate/asp:TemplateField/ColumnsFooterStyle BackColor#5D7B9D Font-BoldTrue HorizontalAlignCenter ForeColorWhite /PagerStyle BackColor#284775 ForeColorWhite HorizontalAlignCenter /SelectedRowStyle BackColor#E2DED6 Font-BoldTrue ForeColor#333333 /RowStyle HorizontalAlignCenter /HeaderStyle BackColor#5D7B9D Font-BoldTrue ForeColorWhite /EditRowStyle BackColor#999999 /AlternatingRowStyle BackColorWhite ForeColor#284775 //asp:GridView/form
/body
script typetext/javascript src../Scripts/Ajax.js/script
script typetext/javascript src../Scripts/jquery-1.4.1.js/scriptscript languagejavascript typetext/javascriptvar dgPersonsID % dgPersons.ClientID %;/script
/html虽然显示时前台设置的表头最终没有显示不过还是要写的因为免得自己记不清了再有列项还需要绑定数据的。
需要给gridview加OnRowCreated事件。
后台代码 protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){DataTable dt InitData();this.dgPersons.DataSource dt;this.dgPersons.DataBind();}}private DataTable InitData(){DataTable PersonCollect new DataTable();PersonCollect new DataTable();PersonCollect.Columns.Add(p_id);PersonCollect.Columns.Add(p_name);PersonCollect.Columns.Add(p_age);PersonCollect.Columns.Add(p_sex);PersonCollect.Columns.Add(p_industry);PersonCollect.Columns.Add(p_job);PersonCollect.Columns.Add(p_experience);if (PersonCollect.Rows.Count 1){for (int i 0; i 10; i){DataRow nrow PersonCollect.NewRow();nrow[p_id] System.Guid.NewGuid().ToString();nrow[p_name] 西北白杨树;nrow[p_age] 27;nrow[p_sex] 男;nrow[p_industry] 软件;nrow[p_job] 高级工程师;nrow[p_experience] 若干年;PersonCollect.Rows.Add(nrow);}}return PersonCollect;} protected void DgPersons_RowCreated(object sender, GridViewRowEventArgs e){switch (e.Row.RowType){case DataControlRowType.Header://行是标题行TableCellCollection personHeader e.Row.Cells;//标题行的单元格集合personHeader.Clear();//清空//添加一个表头 比如以及表头有三列 那么序号就是 0 1 2 personHeader.Add(new TableHeaderCell());personHeader[0].Attributes.Add(rowspan, 2); //跨2行personHeader[0].Attributes.Add(colspan, 1); //跨1列personHeader[0].Attributes.Add(bgcolor, DarkGreen);personHeader[0].Text 序号;personHeader.Add(new TableHeaderCell());personHeader[1].Attributes.Add(colspan, 3); //跨3列personHeader[1].Attributes.Add(bgcolor, DarkYellow);personHeader[1].Text 个人基本信息;personHeader.Add(new TableHeaderCell());personHeader[2].Attributes.Add(colspan, 3); //跨3列personHeader[2].Attributes.Add(bgcolor, DarkBlue);personHeader[2].Text 工作信息/th/trtr;//再添加一个表头personHeader.Add(new TableHeaderCell());personHeader[3].Attributes.Add(bgcolor, Khaki);personHeader[3].Text 姓名;personHeader.Add(new TableHeaderCell());personHeader[4].Attributes.Add(bgcolor, Khaki);personHeader[4].Text 年龄;personHeader.Add(new TableHeaderCell());personHeader[5].Attributes.Add(bgcolor, Khaki);personHeader[5].Text 性别;personHeader.Add(new TableHeaderCell());personHeader[6].Attributes.Add(bgcolor, Khaki);personHeader[6].Text 行业;personHeader.Add(new TableHeaderCell());personHeader[7].Attributes.Add(bgcolor, Khaki);personHeader[7].Text 职业;personHeader.Add(new TableHeaderCell());personHeader[8].Attributes.Add(bgcolor, Khaki);personHeader[8].Text 经验;//还可以继续添加//记住不论多少行表头每个列的序号是一次递增的而且需要换行 —/th/trtrbreak;}}
前面几个方法是为了加载数据的主要的方法是OnRowCreated事件的DgPersons_RowCreated。
要记住不管增加多少Header它的序号是递增的如果表头有多行那么需要在一行结束的那个Head后增加换行标志。然后才能显示多行表头的效果。
加载了数据的多行复合表头的效果 是不是特别简单...
代码下载
http://download.csdn.net/detail/yysyangyangyangshan/7812499
