Gridview 设计：如何拆分 gridview 使其不占用整个页面宽度？答案

【问题标题】：Gridview design: How do I split the gridview so it does not take full width of page?Gridview 设计：如何拆分 gridview 使其不占用整个页面宽度？
【发布时间】：2009-10-23 13:54:32
【问题描述】：

我的 c# 程序中有一个 gridview 控件，该控件当前有 12 列和 2 行（1 行是标题）。是否可以拆分 12 列，使我有 6 列和 2 行，然后在下面再拆分 6 列和行，这样它就不会占用页面的整个宽度？谢谢。

我的网格视图：

<asp:GridView ID="GridView1" HorizontalAlign="center" Visible="false" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
                DataSourceID="SqlDataSource" EmptyDataText="No data could be found for the email address" CellSpacing="3" CellPadding="4"
                GridLines="None" ForeColor="#333333">
                <Columns>
                    <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
                        SortExpression="ID">
                        <ItemStyle Font-Names="Verdana" Font-Size="9pt" Width="50px" />
                        <HeaderStyle Font-Names="Verdana" Font-Size="10pt" Width="50px" />
                    </asp:BoundField>
                    <asp:BoundField DataField="name" HeaderText="Name" SortExpression="name">
                        <ItemStyle Font-Names="Verdana" Font-Size="9pt" />
                        <HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
                    </asp:BoundField>
                    <asp:BoundField DataField="EmailAddress" HeaderText="Email Address" SortExpression="EmailAddress">
                        <ItemStyle Font-Names="Verdana" Font-Size="9pt" />
                        <HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
                    </asp:BoundField>
                    <asp:BoundField DataField="Address1" HeaderText="Address1" SortExpression="Address1">
                        <ItemStyle Font-Names="Verdana" Font-Size="9pt" />
                        <HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
                    </asp:BoundField>
                    <asp:BoundField DataField="Address2" HeaderText="Address2" SortExpression="Address2">
                        <ItemStyle Font-Names="Verdana" Font-Size="9pt" />
                        <HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
                    </asp:BoundField>
                    <asp:BoundField DataField="city" HeaderText="City" SortExpression="city">
                        <ItemStyle Font-Names="Verdana" Font-Size="9pt" />
                        <HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
                    </asp:BoundField>
                    <asp:BoundField DataField="PostCode" HeaderText="Post Code" SortExpression="PostCode">
                        <ItemStyle Font-Names="Verdana" Font-Size="9pt" />
                        <HeaderStyle Font-Names="Verdana" Font-Size="10pt" />
                    </asp:BoundField>
                </Columns>

                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                <FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <EditRowStyle BackColor="#999999" />
                <EmptyDataRowStyle cssclass="mycentertext" />
            </asp:GridView>

【问题讨论】：

标签： gridview

【解决方案1】：

Mike，如果你实现你想要的，我认为你最终会得到一个令人困惑的 UI，恕我直言。

每当我遇到包含大量列的网格视图时，我都会重构 UI，以便网格显示更少、更重要或识别列，然后，当用户单击一行时，我会显示行的其余数据是单独的“详细信息”显示在网格下方。

在您的情况下，我将保留 id、name 和 email 列，并将其余部分移至详细信息部分。

如果你足够精通 JavaScript，这也应该是客户端的。

【讨论】：