大型网站开发协调免费优化网站
继续看一个简单的ASP.NET应用。
Gridview相信大家使用的比较多了,一般对多行数据进行展示和操作都会用到这个控件。而对于表头,也是很重要的一部分,它负责对数据进行分门别类的。而对于复合表头该如何展示呢?这个也挺简单的。
显示复合表头,一般可以在后台通过代码实现。对于表头是由多个Header控件组成的,一般默认的一个Header显示一列。而对于复合表头就是将Header进行设置,让它占用多列或者多行。或者增加很多个Header,然后每个Header分别占用多列或者多行就可以了。
来看一个复合的表头。
如果只显示一个表头的话是:序号 姓名 年龄 性别 行业 职业 经验,
现在又新增个人基本信息和工作信息,其实新增的这个表头是两个Header控件,它们分别占用3列,所以就达到了这样复合表头的效果。来看代码:
前台代码:
需要给gridview加OnRowCreated事件。
后台代码:
前面几个方法是为了加载数据的,主要的方法是:OnRowCreated事件的DgPersons_RowCreated。
要记住,不管增加多少Header它的序号是递增的,如果表头有多行,那么需要在一行结束的那个Head后增加换行标志。然后才能显示多行表头的效果。
加载了数据的多行复合表头的效果:
是不是特别简单...
代码下载: http://download.csdn.net/detail/yysyangyangyangshan/7812499
Gridview相信大家使用的比较多了,一般对多行数据进行展示和操作都会用到这个控件。而对于表头,也是很重要的一部分,它负责对数据进行分门别类的。而对于复合表头该如何展示呢?这个也挺简单的。
显示复合表头,一般可以在后台通过代码实现。对于表头是由多个Header控件组成的,一般默认的一个Header显示一列。而对于复合表头就是将Header进行设置,让它占用多列或者多行。或者增加很多个Header,然后每个Header分别占用多列或者多行就可以了。
来看一个复合的表头。
如果只显示一个表头的话是:序号 姓名 年龄 性别 行业 职业 经验,
现在又新增个人基本信息和工作信息,其实新增的这个表头是两个Header控件,它们分别占用3列,所以就达到了这样复合表头的效果。来看代码:
前台代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body id="Body1" runat="server"><form id="Form1" runat="server"><asp:GridView ID="dgPersons" runat="server" EnableViewState="false" CellPadding="4"GridLines="Horizontal" PageChange="TextBox" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333"CellSpacing="1" Width="60%" ShowNoRecordTip="True" OnRowCreated="DgPersons_RowCreated"><Columns><asp:TemplateField><ItemTemplate><%#Container.DataItemIndex +1%><input id="hideID" type="hidden" runat="server" value='<%#Eval("p_id")%>' /></ItemTemplate><HeaderTemplate><span>序号</span></HeaderTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><span> <%#Eval("p_name")%></span></ItemTemplate><HeaderTemplate><span>姓名</span></HeaderTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><span> <%#Eval("p_age")%></span></ItemTemplate><HeaderTemplate><span>年龄</span></HeaderTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><span> <%#Eval("p_sex")%></span></ItemTemplate><HeaderTemplate><span>性别</span></HeaderTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><span> <%#Eval("p_industry")%></span></ItemTemplate><HeaderTemplate><span>行业</span></HeaderTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><span> <%#Eval("p_job")%></span></ItemTemplate><HeaderTemplate><span>职业</span></HeaderTemplate></asp:TemplateField><asp:TemplateField><ItemTemplate><span> <%#Eval("p_experience")%></span></ItemTemplate><HeaderTemplate><span>经验</span></HeaderTemplate></asp:TemplateField></Columns><FooterStyle BackColor="#5D7B9D" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" /><PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /><SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /><RowStyle HorizontalAlign="Center" /><HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /><EditRowStyle BackColor="#999999" /><AlternatingRowStyle BackColor="White" ForeColor="#284775" /></asp:GridView></form>
</body>
<script type="text/javascript" src="../Scripts/Ajax.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script><script language="javascript" type="text/javascript">var 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></tr><tr>";//再添加一个表头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></tr><tr>break;}}
前面几个方法是为了加载数据的,主要的方法是:OnRowCreated事件的DgPersons_RowCreated。
要记住,不管增加多少Header它的序号是递增的,如果表头有多行,那么需要在一行结束的那个Head后增加换行标志。然后才能显示多行表头的效果。
加载了数据的多行复合表头的效果:
是不是特别简单...
代码下载: http://download.csdn.net/detail/yysyangyangyangshan/7812499