ASP.NET 可展开/折叠 DataGrid

• 下载源代码 - 12.1 Kb
• 下载演示项目 - 20.5 Kb

引言

ASP.NET DataGrid 非常强大和健壮。然而，我们需要它执行的一些操作需要大量的自定义代码。Denis Bauer 的 HierarGrid 是一个非常复杂的 DataGrid 的例子。不幸的是，我的项目需要能够展开和折叠 DataGrid 列，而不是 DataGrid 行，所以我实现了 ExDataGrid 服务器控件，本文对此控件进行了描述。大部分代码逻辑是从 HierarGrid 借鉴的。

您可以在 这里 查看 HierarGrid。

您也可以在 这里 查看 ExDataGrid 的演示。

图 1. 折叠的列

图 2. 展开的列

使用服务器控件

ExDataGrid 服务器控件需要使用三个类

• ExDataGrid - 主要服务器控件。它直接从 DataGrid 派生，并具有常规 DataGrid 的所有功能。
• ExColumnExpand - 带有加号和减号图像的列。此控件从 BoundColumn 派生。
• ExColumn - 将要展开/折叠的列。此控件从 BoundColumn 派生，并添加了诸如 DrawBorders、ForeColor 和 BackColor 之类的属性。

为了将 ExColumnExpand 和 ExColumn 类关联起来，以便它们协同工作，必须为每个展开组分配 ExGroupName 属性。

示例

<cc1:ExDataGrid id="DataGridReport1" runat="server" 
             BorderColor="#000066" CellPadding="1" BorderWidth="2px"
    AutoGenerateColumns="False" ShowFooter="True">
    <EditItemStyle ForeColor="Black" BackColor="Yellow"></EditItemStyle>
    <AlternatingItemStyle Font-Size="X-Small" BackColor="Gainsboro">
    </AlternatingItemStyle>
    <ItemStyle Font-Size="X-Small" Font-Names="Verdana"></ItemStyle>
    <HeaderStyle Font-Bold="True" BackColor="#D7D7D7"></HeaderStyle>
    <FooterStyle Font-Size="Small" BackColor="RoyalBlue"></FooterStyle>
    <Columns>
        <asp:BoundColumn DataField="Title_ID" HeaderText="Title_ID" 
                         SortExpression="Title_ID"></asp:BoundColumn>
        <cc1:ExColumnExpand ExGroupName="TitleExpand"  DataField="Title" 
                         HeaderText="Title" SortExpression="Title" />
        <cc1:ExColumn DataField="Price" ExGroupName="TitleExpand" 
                         HeaderText="Price" SortExpression="Price"
            DrawBorders="true">
            <ItemStyle BackColor="#396794" ForeColor="white"></ItemStyle>
            <HeaderStyle BackColor="#396794" ForeColor="white"></HeaderStyle>
            <FooterStyle BackColor="#396794" ForeColor="white"></FooterStyle>
        </cc1:ExColumn>
        <cc1:ExColumn DataField="Notes"  ExGroupName="TitleExpand" 
                         HeaderText="Notes" SortExpression="Notes" 
             DrawBorders="true">
            <ItemStyle BackColor="#396794" ForeColor="white"></ItemStyle>
            <HeaderStyle BackColor="#396794" ForeColor="white"></HeaderStyle>
            <FooterStyle BackColor="#396794" ForeColor="white"></FooterStyle>
        </cc1: ExColumn>
        <asp:BoundColumn DataField="Type" 
               HeaderText="Type" SortExpression="Type" />
        <cc1:ExColumnExpand DataField="Publisher" 
                   ExGroupName="PublishExpand" HeaderText="Publisher" 
             SortExpression="Publisher" />
        <cc1:ExColumn DataField="Publication"  ExGroupName="PublishExpand" 
                   HeaderText="Publication Date" 
            SortExpression="Publication" DrawBorders="false">
            <ItemStyle BackColor="#396794" ForeColor="white"></ItemStyle>
        </cc1:ExColumn>
        <asp:BoundColumn DataField="Authors" HeaderText="Authors" 
                   SortExpression="Authors"></asp:BoundColumn>
    </Columns>
</cc1: ExDataGrid>

结论

此服务器控件编写速度很快，还有很大的改进空间。它确实实现了 IPostback 接口，因此控件的状态在排序或任何其他数据重新绑定期间都会保存。此外，控件的展开和折叠功能通过 JavaScript 运行，因此不需要回发。请提出任何建议或改进。请告诉我您的使用情况！