头疼问题,如何固定GridView模板列的宽度?
前台代码:
- HTML code
<asp:GridView ID="GVPublish" runat="server" CssClass="GridViewStyle" AutoGenerateColumns="False" Width="100%" EmptyDataText='<p style="text-align: center"><span style="color: #ff6600">*无数据*</span></p>' AllowPaging="True" OnPageIndexChanging="GVPublish_PageIndexChanging" PageSize="2" OnRowCommand="GVPublish_RowCommand" > <FooterStyle CssClass="GridViewFooterStyle" /> <RowStyle CssClass="GridViewRowStyle" /> <SelectedRowStyle CssClass="GridViewSelectedRowStyle" /> <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" /> <HeaderStyle CssClass="GridViewHeaderStyle" /> <Columns> <asp:BoundField DataField="Title" HeaderText="标题" /> <asp:BoundField DataField="ColumnID" HeaderText="所属栏目" /> <asp:TemplateField HeaderText="编辑"> <HeaderStyle Width="40px" /> <ItemTemplate> <asp:ImageButton ID="btnEdit" runat="server" ImageUrl="~/Images/btpaste.gif" CommandName="btnEdit" CommandArgument='<%#DataBinder.Eval(Container,"DataItem.InfoID") %>' /> </ItemTemplate> <ItemStyle HorizontalAlign="Center" Width="40px" /> </asp:TemplateField> <asp:TemplateField HeaderText="删除"> <HeaderStyle Width="40px" /> <ItemTemplate> <asp:ImageButton ID="btnDelete" runat="server" CommandName="btnDel" CommandArgument='<%#DataBinder.Eval(Container,"DataItem.InfoID") %>' ImageUrl="~/Images/btdelete.gif" OnClientClick="return confirm('是否确定删除此文章?')" /> </ItemTemplate> <ItemStyle HorizontalAlign="Center" Width="40px" /> </asp:TemplateField> </Columns> <PagerTemplate> <asp:Label ID="lblPage" runat="server" Text='<%# "第" + (((GridView)Container.NamingContainer).PageIndex + 1) + "页/共" + (((GridView)Container.NamingContainer).PageCount) + "页" %> '></asp:Label> <asp:LinkButton ID="lbnFirst" runat="Server" Text="首页" Enabled='<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>' CommandName="Page" CommandArgument="First" ></asp:LinkButton> <asp:LinkButton ID="lbnPrev" runat="server" Text="上一页" Enabled='<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>' CommandName="Page" CommandArgument="Prev" ></asp:LinkButton> <asp:LinkButton ID="lbnNext" runat="Server" Text="下一页" Enabled='<%# ((GridView)Container.NamingContainer).PageIndex != (((GridView)Container.NamingContainer).PageCount - 1) %>' CommandName="Page" CommandArgument="Next" ></asp:LinkButton> <asp:LinkButton ID="lbnLast" runat="Server" Text="尾页" Enabled='<%# ((GridView)Container.NamingContainer).PageIndex != (((GridView)Container.NamingContainer).PageCount - 1) %>' CommandName="Page" CommandArgument="Last" ></asp:LinkButton> <br /> </PagerTemplate> </asp:GridView>
显示效果:
效果图1(GridView第一页,模板列编辑和删除显示正常--宽度40px):
效果图2(GridView前2列较短,模板列编辑和删除显示不正常):
效果图3(GridView前2列较长,模板列编辑和删除显示正常):
将GridView的宽度设置成固定宽度的方法我已经试过了,同样无效!如何固定此模板列的宽度??
谢谢!!
[解决办法]
呵呵 这需要四个地方都要设置的。
我看一下我的代码
[解决办法]
因为你GridView的宽度已设置设置了100%,
所以当整个GridView根据页面的宽度超过了每一列相加的宽度,
则每一列设置的宽度不起作用,
的确设置GridView的每一列宽度,特别是在GridView的宽度已设置设置了100%的情况,往往不起作用!!
在一般情况下,客户不会要求太严格,但我也遇到过"苛刻"客户,
我的解决办法是:
都设置成模板列,最后一列不一定,
将前n-1列Label设置成固定的宽度,
将最后一列的item的宽度设置成比较大的数,如1000,<ItemStyle Width="1000px" />
这样就会达到你要的效果!!
[解决办法]
哦 知道了 你的gridview的 外观设置 都在css里了。所以在属性里 设置的没有作用。
那就把我刚才 贴的代码 放在css里吧
[解决办法]
表格的宽度100%,那么留下一个column不要设置绝对值,也设置为100%,其他的column都设置绝对值
[解决办法]
GridView1.Attributes.Add("style", "word-break:keep-all;word-wrap:normal");
//下面这行是自动换行
GridView1.Attributes.Add("style", "word-break:break-all;word-wrap:break-word");
或protected void GridView1_DataRowBound(object o, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//设置要换行的模板列
e.Row.Cells[1].Attributes.Add("style", "word-break :break-all ; word-wrap:break-word");
}
}
设置ItemStyle 固定宽度
[解决办法]
后台Page_load事件也可以设置..
this.GridView1.HeaderRow.Cells[0].Width = 500;