ASP.NET 在 GridView 中设置 DataBound 列的宽度答案

【问题标题】：ASP.NET Setting width of DataBound column in GridViewASP.NET 在 GridView 中设置 DataBound 列的宽度
【发布时间】：2012-01-06 04:26:06
【问题描述】：

我有一个 GridView，它使用 BoundField 作为列。我正在尝试为我的UserInfo 列设置最大宽度。

我尝试了很多很多方法，但没有一个有效。下面是我的 GridView 的代码：

<asp:GridView ID="GridView1" AutoGenerateEditButton="True" 
ondatabound="gv_DataBound" runat="server" DataSourceID="SqlDataSource1"
AutoGenerateColumns="False">

<Columns>
                <asp:BoundField HeaderText="UserId" 
                DataField="UserId" 
                SortExpression="UserId"></asp:BoundField>

                <asp:BoundField HeaderText="Username" 
                DataField="Username" 
                SortExpression="Username"></asp:BoundField>

                <asp:BoundField HeaderText="UserInfo" 
                DataField="UserInfo" 
                SortExpression="UserInfo"></asp:BoundField>

                </Columns>
</asp:GridView>

寻找有关如何设置特定列的宽度的建议，这是我的UserInfo 列。

【问题讨论】：

在css属性中只给出“width:auto”它会自动扩展列

标签： c# asp.net gridview

【解决方案1】：

我为你做了一个小演示。演示如何显示长文本。

在此示例中，有一列名称可能包含很长的文本。 boundField 将在表格单元格中显示所有内容，因此 单元格将根据需要扩展（因为内容）

TemplateField 也将呈现为一个单元格，但它包含一个 div，limits width任何内容，例如 40px。所以这个列会有某种最大宽度！

    <asp:GridView ID="gvPersons" runat="server" AutoGenerateColumns="False" Width="100px">
        <Columns>
            <asp:BoundField HeaderText="ID" DataField="ID" />
            <asp:BoundField HeaderText="Name (long)" DataField="Name">
                <ItemStyle Width="40px"></ItemStyle>
            </asp:BoundField>
            <asp:TemplateField HeaderText="Name (short)">
                <ItemTemplate>
                    <div style="width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                        <%# Eval("Name") %>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

下面是我的演示代码

 public partial class gridViewLongText : System.Web.UI.Page
 {
     protected void Page_Load(object sender, EventArgs e)
     {
         #region init and bind data
         List<Person> list = new List<Person>();
         list.Add(new Person(1, "Sam"));
         list.Add(new Person(2, "Max"));
         list.Add(new Person(3, "Dave"));
         list.Add(new Person(4, "TabularasaVeryLongName"));
         gvPersons.DataSource = list;
         gvPersons.DataBind();
         #endregion
     }
 }

 public class Person
 {
     public int ID { get; set; }
     public string Name { get; set; }

     public Person(int _ID, string _Name)
     {
         ID = _ID;
         Name = _Name;
     }
 }

【讨论】：

【解决方案2】：

在绑定字段中添加 HeaderStyle：

    <asp:BoundField HeaderText="UserId"
                DataField="UserId" 
                SortExpression="UserId">

                <HeaderStyle Width="200px" />

</asp:BoundField>

【讨论】：

谢谢，但它似乎不起作用。由于输入较长，我的列仍然垂直延伸
对我有用，谢谢。干净、简单的解决方案。

【解决方案3】：

宽度可以设置为特定列，如下所示：按百分比：

<asp:BoundField HeaderText="UserInfo"  DataField="UserInfo"  
SortExpression="UserInfo" ItemStyle-Width="100%"></asp:BoundField>

或

按像素：

<asp:BoundField HeaderText="UserInfo"  DataField="UserInfo"  
SortExpression="UserInfo" ItemStyle-Width="500px"></asp:BoundField>

【讨论】：

百分比从哪里获得价值？价值百分比？
是否需要动态设置宽度？感谢您的宝贵时间。

【解决方案4】：

这适用于所有使用宽度的情况。

`<asp:TemplateField HeaderText="DATE">
   <ItemTemplate>
   <asp:Label ID="Label1" runat="server" Text='<%# Bind("date") %>' Width="100px"></asp:Label>
   </ItemTemplate>
  </asp:TemplateField>`

【讨论】：

【解决方案5】：

<asp:GridView ID="GridView1" AutoGenerateEditButton="True" 
ondatabound="gv_DataBound" runat="server" DataSourceID="SqlDataSource1"
AutoGenerateColumns="False" width="600px">

<Columns>
                <asp:BoundField HeaderText="UserId" 
                DataField="UserId" 
                SortExpression="UserId" ItemStyle-Width="400px"></asp:BoundField>
   </Columns>
</asp:GridView>

【讨论】：

它对我也不起作用。如果这很重要，我将 AutoGenerateColumns 设置为 false。

【解决方案6】：

嘿，最近我想出了如何设置宽度，如果您的 gridview 数据绑定到 sql 数据集。首先设置这些控件RowStyle-Wrap="false" HeaderStyle-Wrap="false"，然后您可以根据需要设置列宽。例如：ItemStyle-Width="150px" HeaderStyle-Width="150px"

【讨论】：