合并DataGrid标题列

• 下载源代码 - 13.2 Kb

引言

本文描述了一种通过巧妙地修改 HTML 来合并 DataGrid 标题的技术。

背景

一段时间前，出现了一个需求，需要为许多子标题提供一个公共标题；例如，假设您想显示包含帐户、库存和付款信息记录。

• 帐户信息包含公司名称、网站和联系人。
• 库存包含账单号码和账单日期。
• 付款详情包含金额和付款类型。

现在在这种情况下，您需要将不同的 DataGrid 标题列合并到一个公共 DataGrid 标题中。

使用代码

要在 DataGrid 中显示公共标题，请按以下方式编写代码。首先，将您的 DataGrid 放在 Table 标签中，并在 <Columns> 部分中编写您的第一个 <asp:TemplateColumn>，如下所示

<table id="headingtable" 
    style="FONT-WEIGHT: bold; COLOR: #244668" borderColor="#000033"
    height="100%" cellSpacing="0" 
    cellPadding="0" border="0" runat="server">
<tr>
    <td><asp:datagrid id="grdSearchResult" Runat="server" 
            AllowPaging="True" AutoGenerateColumns="False" 
            AllowSorting="True" BackColor="white">
        <ItemStyle Height="30px" VerticalAlign="Top" 
             CssClass="GrdItemStyle"></ItemStyle>
        <AlternatingItemStyle Height="30px" 
            CssClass="GrdItemStyle"></AlternatingItemStyle>
        <HeaderStyle CssClass="GrdHeaderStyle"></HeaderStyle>
        <Columns>
        <asp:TemplateColumn ItemStyle-BorderColor="#000033" 
            ItemStyle-Width="25Px" ItemStyle-Wrap="True" 
            HeaderStyle-CssClass="GrdExtraHeader">
        <HeaderTemplate>Edit
    </td>
    <td width="500" class="GrdExtraHeader" colspan="3" 
           align="center">Account Information</td>
    <td width="325" class="GrdExtraHeader" 
           colspan="2" align="center">Inventory</td>
    <td width="225" class="GrdExtraHeader" colspan="2" 
           align="center">Payment Details</td>
</tr>
<td Align="Center" Height="25px" bgcolor="#244668" 
       class="GrdHeaderStyle" BorderColor="#000033"></td>
</HeaderTemplate>
<ItemTemplate>
    <asp:CheckBox id="chkEdit" Runat="server" Width="25">
    </asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>

请注意，您需要在给出标题模板名称后关闭 td 标签，即 </td>。然后，通过指定 colspan 属性，将其余的公共标题放在一个新的 TD 中，该属性包含您想要合并的列总数，即 <td width="500" class="GrdExtraHeader" colspan="3" align="center">帐户信息</td>。这里 帐户信息 有三个子标题。在最后一个公共标题之后关闭行 (</tr>)。在上面的代码中，您可以在“付款详情”之后找到此代码。关闭 TR 标签的原因是我们需要在第二行显示所有子标题。以标准方式编写 DataGrid 列的其余代码。请参阅下面的代码。

<asp:TemplateColumn HeaderText="Company" HeaderStyle-CssClass="GrdHeaderStyle" 
       ItemStyle-Width="100Px" ItemStyle-Wrap="True" 
       ItemStyle-CssClass="GrdItemStyle">
    <ItemTemplate>
        <asp:Label ID="lblCompanyName"  Width="100px" 
             Runat="server" 
             text='<%# DataBinder.Eval(
                Container.DataItem,"company_name") %>'>
        </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="WebSite" 
            HeaderStyle-CssClass="GrdHeaderStyle" 
            ItemStyle-Width="100Px" ItemStyle-Wrap="True" 
            ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblWebSiteName" Width="150px" 
                  Runat="server" 
                  text='<%# DataBinder.Eval(
                    Container.DataItem,"website_name") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Contact" 
                HeaderStyle-CssClass="GrdHeaderStyle" 
                ItemStyle-Width="100Px" ItemStyle-Wrap="True" 
                ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblContactPersonName" Width="100px" 
                Runat="server" 
                text='<%# DataBinder.Eval(
                  Container.DataItem,"contact_person_name") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Bill No" 
            HeaderStyle-CssClass="GrdHeaderStyle" 
            ItemStyle-Width="75Px"
            ItemStyle-Wrap="True" 
            ItemStyle-HorizontalAlign="Right" 
            ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblBillno" Width="75px" 
                Runat="server" 
                text='<%# DataBinder.Eval(
                        Container.DataItem,"BillNo") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Bill Date" 
          HeaderStyle-CssClass="GrdHeaderStyle" 
          ItemStyle-Width="75Px" ItemStyle-Wrap="True" 
          ItemStyle-HorizontalAlign="Right" 
          ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblBillDate" Width="125px" 
               Runat="server" 
               text='<%# DataBinder.Eval(
                     Container.DataItem,"BillDate") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Amount" 
          HeaderStyle-CssClass="GrdHeaderStyle" 
          ItemStyle-Width="75Px"
          ItemStyle-Wrap="True" ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblamount" Width="75px" 
                 Runat="server" 
                 text='<%# DataBinder.Eval(
                       Container.DataItem,"Amount") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Payment Type" 
               HeaderStyle-CssClass="GrdHeaderStyle" 
               ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblPayout" Width="75px" Runat="server" 
               text='<%# DataBinder.Eval(
                       Container.DataItem,"payment_type") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    </columns> </asp:datagrid></TD></TR>
</table>