62,041
社区成员
发帖
与我相关
我的任务
分享GridView关于固定表头，表身可以上下动（与网上多数情况不一样）问题
我百度了一下，有用js，有用css，但都没有解决我的问题，我的问题如下：
表头的列宽不一致，表头的内容有“空”、两字、三字、四字，其中四个字的表头分成两行了（该列与两字差不多宽）。我从网上找到的例子用上去，有的能够实现固定表头，但表头的列宽完全不一样，起不到固定表头的作用（数据很多）。
表头的列宽不一致，表头的内容有“空”、两字、三字、四字，其中四个字的表头分成两行了（该列与两字差不多宽）。我从网上找到的例子用上去，有的能够实现固定表头，但表头的列宽完全不一样，起不到固定表头的作用（数据很多）。
...全文
请发表友善的回复…
发表回复
c9cad 2015-01-16
- 打赏
- 举报
自己摸索解决了，需要设置：<HeaderStyle Width="20px" /> ，也就是说，将表头的宽度设置成跟表体一样就可以了。还是谢谢大家。不过还有没有更好的方法呢？
c9cad 2015-01-15
- 打赏
- 举报
啊，一个不小心，竟然碰到一个行业难题呀。不要求其他，能解决IE吗？
特别代码中：
<script type="text/javascript">
function init()
{
var bodyGridView = document.getElementByIdx("<%=GridView1.ClientID%>");
var headGridView= bodyGridView.cloneNode(true);
for(i = headGridView .rows.length -1;i > 0;i--)
headGridView .deleteRow(i); //删掉数据行
bodyGridView.deleteRow(0); //删掉表头行
headdiv.appendChild(headGridView);
}
window.onload = init
</script>
怎样设置表头中各列的宽度呢？
S314324153 2015-01-15
- 打赏
- 举报
要适应的浏览器那么多,Gridview固定表头，我还没碰到过一个完美的解决方案。
你还不如用前台Jquery框架下UI来做
c9cad 2015-01-15
- 打赏
- 举报
还是方法二呀，变形的问题不能解决呀。求大神指点一下！
tym_1607506270 2015-01-15
- 打赏
- 举报
创建GridView表头固定、表体可滚动的控件
//js设置
<script type="text/javascript">
function s()
{
var t = document.getElementById("<%=GridView1.ClientID%>");
var t2 = t.cloneNode(true)
for(i = t2.rows.length -1;i > 0;i--)
t2.deleteRow(i)
t.deleteRow(0)
a.appendChild(t2)
}//codego.net/tags/11/1/
window.onload = s
</script>
//GridView设置
<asp:GridView ID="GridView1" runat="server" Font-Size="12px"
GridLines="None" CellPadding="4" Width="560px" ForeColor="#333333">
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#E3EAEB" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#EDEDED" Height="26px" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
//cs页面设置
ICollection CreateDataSource()
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("班级", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("姓名", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));
for (int i = 0; i < 50; i++)
{
System.Random rd = new System.Random(Environment.TickCount * i); ;
dr = dt.NewRow();
dr[0] = "班级" + i.ToString();
dr[1] = "【正大光明】" + i.ToString();
dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
dt.Rows.Add(dr);
}
System.Data.DataView dv = new System.Data.DataView(dt);
return dv;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.Attributes.Add("style", "table-layout:fixed");
GridView1.DataSource = CreateDataSource();
GridView1.DataBind();
}
}
c9cad 2015-01-15
- 打赏
- 举报
那是上面方法二的原理，这样造成格式很乱，不能跟原来一样。
jan307 2015-01-15
- 打赏
- 举报
我以前这么做过，你可以参考：
1.将显示数据的Table放在div中，div 的style overflow-y:scroll
2.克隆Table，只留下表头的 tr
3.将克隆的Table 绝对定位到原来的Table上，定位的top ,left都是按照原来的Table位置获得的。
c9cad 2015-01-15
- 打赏
- 举报
不是，这个是我网上找的例子，我自己的不是这样的。
於黾 2015-01-15
- 打赏
- 举报
width: 328px;
你div宽度比表格小太多了,而且表格也没有指定总体宽度
完全是靠每一列的宽度给"撑"出来的,不变形才怪
c9cad 2015-01-15
- 打赏
- 举报
有有时间的的兄弟吗？谢谢啦！
c9cad 2015-01-14
- 打赏
- 举报
以下两种方法，方法一没有成功，方法二就是表头变形太厉害，无法使用。
***************************************************************************************
方法一：
<head runat="server">
<title>无标题页</title>
<style>
.Freezing
{
position:relative ;
table-layout:fixed;
top:expression_r(this.offsetParent.scrollTop);
z-index: 10;
}
.Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
</style>
</head>
<asp:GridView ID="GridView1" runat="server" CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None">
......
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" CssClass="Freezing" />
......
</asp:GridView>
实现方法极其简单，缺点是没有水平滚动功能，如果表格很大的话就不方便了。
方法二：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.Attributes.Add("style", "table-layout:fixed"); //表格必须是固定大小
}
}
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
function init()
{
var bodyGridView = document.getElementByIdx("<%=GridView1.ClientID%>");
var headGridView= bodyGridView.cloneNode(true);
for(i = headGridView .rows.length -1;i > 0;i--)
headGridView .deleteRow(i); //删掉数据行
bodyGridView.deleteRow(0); //删掉表头行
headdiv.appendChild(headGridView);
}
window.onload = init
</script>
</head>
<div id="headdiv" style="top: 16px; left: 152px; position: absolute; width: 328px;
height: 32px; overflow-x: hidden; overflow-y: scroll">
//不需要显示表头水平滚动条
</div>
<div id="bodydiv" style="top: 45px; left: 152px; position: absolute; width: 328px;
height: 200px; overflow: auto" onscroll="headdiv.scrollLeft=scrollLeft">
//表体的水平滚动条拖动触发表头的水平滚动事件
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" CellPadding="4"
Font-Names="airl" Font-Size="12px"
ForeColor="#333333" AllowSorting="True">
......
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
SortExpression="ID">
<HeaderStyle Width="20px" /> //必须定义表头和表体相同的宽度
<ItemStyle Width="20px" />
</asp:BoundField>
<asp:BoundField DataField="GongYingShangBianHao" HeaderText="GongYingShangBianHao"
SortExpression="GongYingShangBianHao">
<HeaderStyle Width="300px" />
<ItemStyle Width="300px" />
</asp:BoundField>
......
</Columns>
......
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:GIFTConnectionString %>"
SelectCommand="SELECT......">
</asp:SqlDataSource>
</div>
panyuan922 2015-01-14
- 打赏
- 举报
固定表头的列宽不行？
c9cad 2015-01-14
- 打赏
- 举报
这个我找了几个不同的版本，感觉满足不了
c9cad 2015-01-14
- 打赏
- 举报
我的表格宽度是写死了的，每列的宽度也是固定的
於黾 2015-01-14
- 打赏
- 举报
如果你指定每一列的列宽,那么整个表格也必须固定宽度
或者如果你指定表格显示百分比,那么每一列也都要写成百分比
同时你所有列的px相加必须和表宽度px相等,或者百分比相加必须和表宽度百分比相等
否则就会有某些列给你自动拉伸压缩了
娃都会打酱油了 2015-01-14
- 打赏
- 举报
GridView72计居然满足不了你的要求？
