创建复杂表头的表格

最新推荐文章于 2017-12-04 12:15:24 发布

星辰的雨

最新推荐文章于 2017-12-04 12:15:24 发布

阅读量882

点赞数

分类专栏： ASP.NET 文章标签： asp server object table border 报表

ASP.NET 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

GridView的功能虽然强大，但在创建复杂表头报表时却显得逊色许多。此时我们应该想起另外一个控件： Repeater。下面是 Repeater的结构：

复制

保存

<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
    </HeaderTemplate>
    <ItemTemplate>
    </ItemTemplate>
    <AlternatingItemTemplate>
    </AlternatingItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
</asp:Repeater>

顾名思义，HeaderTemplate为表头模板，ItemTemplate为可重复的项，AlternatingItemTemplate为可重复交替项，FooterTemplate为注脚部部分。
下面给出示例：
单击显示全图，Ctrl+滚轮缩放图片

1. 前台代码：

复制

保存

<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
        <table border="1" align="center" width="100%" bordercolorlight="#a9a9a9" bordercolordark="#ffffff"
            cellspacing="0" cellpadding="1" bordercolor="#a9a9a9" style="text-align: center;">
            <tr bgcolor="#B5DBFF">
                <td rowspan="2" style="width: 100px">
                    波段</td>
                <td rowspan="2" style="width: 100px">
                    时段</td>
                <td colspan="3" style="height: 17px;">
                    第一部分</td>
                <td colspan="3" style="height: 17px;">
                    第二部分</td>
                <td rowspan="2" style="width: 100px">
                    合计</td>
            </tr>
            <tr bgcolor="#B5DBFF">
                <td style="width: 100px; height: 17px;">
                    一</td>
                <td style="width: 100px; height: 17px;">
                    二</td>
                <td style="width: 100px; height: 17px;">
                    三</td>
                <td style="width: 100px; height: 17px;">
                    四</td>
                <td style="width: 100px; height: 17px;">
                    五</td>
                <td style="width: 100px; height: 17px;">
                    六</td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td style="width: 100px">
                <%# Eval("ChannelID") %>
            </td>
            <td style="width: 100px">
                <%# Eval("Time")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Monday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Tuesday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Wednesday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Thursday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Friday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Saturday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Sunday")%>
            </td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr style="background-color: WhiteSmoke;">
            <td style="width: 100px">
                <%# Eval("ChannelID") %>
            </td>
            <td style="width: 100px">
                <%# Eval("Time")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Monday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Tuesday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Wednesday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Thursday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Friday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Saturday")%>
            </td>
            <td style="width: 100px">
                <%# Eval("Sunday")%>
            </td>
        </tr>
    </AlternatingItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
<cc1:WebPager ID="WebPager1" runat="server" PagerStyle="NextPrev" ControlToPaginate="Repeater1"
    ItemsPerPage="24" OnPageIndexChanged="WebPager1_PageIndexChanged" />

2. 后台代码：

复制

保存

#region Page事件
DataTest.BLL.GetData myBiz = new DataTest.BLL.GetData();
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        GetData();
        BindGrid();
    }
}
#endregion

#region Repeater

#region 数据绑定
/// <summary>
/// 获取数据
/// </summary>
protected void GetData()
{
    this.DataSource = myBiz.GetOrderDetails("RM_Clocks"); ;
}

/// <summary>
/// GridView 数据绑定
/// </summary>
private void BindGrid()
{
    WebPager1.DataSource = this.DataSource;
    WebPager1.DataBind();
}
#endregion

#region 分页
protected void WebPager1_PageIndexChanged(object sender, wf.WebPager.PageChangedEventArgs e)
{
    WebPager1.CurrentPageIndex = e.NewPageIndex;
    WebPager1.DataSource = this.DataSource;
    WebPager1.DataBind();
}
#endregion

#endregion