Question

如何让GridView自动调整每列的宽度或修改Default.aspx中每列的宽度？我遇到的问题是某些列太宽而其他列太窄（数据转到下一行）。

<div class="divNext">
    <asp:ScriptManagerProxy ID="DisplayResultsScriptManager" runat="server">
    </asp:ScriptManagerProxy>
    <asp:UpdatePanel ID="DisplayResultsUpdatePanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div>
                <asp:GridView ID="GridViewX" RowStyle-Wrap="false" AllowSorting="true"
                    GridLines="Vertical" OnSorting="GridViewX_Sorting" OnRowDataBound="GridViewX_RowDataBound"
                    runat="server" Height="100" Width="100%" EnableViewState="true">
                </asp:GridView>
            </div>
            <asp:Timer ID="ResultsTimer" Interval="60000" Enabled="true" runat="server" OnTick="DisplayResultsTimer_Tick">
            </asp:Timer>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

Answer 1

如果您想要对每列进行更多控制，则需要使用 BoundField 或其他一些字段。

查看this page的声明性语法部分，了解其他类型的字段。

注意：如果您自己创建列，请确保AutoGenerateColumns="False"。

enter image description here

<asp:GridView ID="GridViewX" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name">
            <ItemStyle Width="150px"/>
        </asp:BoundField>
        <asp:BoundField DataField="Address" HeaderText="Address">
            <ItemStyle Width="50px"/>
        </asp:BoundField>
    </Columns>
</asp:GridView>

protected void Page_Load(object sender, EventArgs e)
{
    GridViewX.DataSource = new List<Custom>
    {
        new Custom {Name = "Jon Doe", Address = "123 Street"},
        new Custom {Name = "Merry Doe", Address = "123 Street"},
    };
    GridViewX.DataBind(); 
}

public class Custom
{
    public string Name { get; set; }
    public string Address { get; set; }
}

Answer 2

添加<RowStyle CssClass="rowstyle" />

 <asp:GridView ID="GridViewX" RowStyle-Wrap="false" AllowSorting="true"
                    GridLines="Vertical" OnSorting="GridViewX_Sorting" OnRowDataBound="GridViewX_RowDataBound"
                    runat="server" Height="100" Width="100%" EnableViewState="true">
                 <RowStyle CssClass="rowstyle" />
                </asp:GridView>

CSS：

<style>
        .rowstyle td
        {
            width:150px;
        }

    </style>

如何在gridview中控制列宽？

2 个答案: