62,046
社区成员
发帖
与我相关
我的任务
分享gridview表头固定问题
expression貌似只支持IE。
求支持IE\FF\chrome的方法或插件或控件.
谢谢各位了。
目前用的代码:
求支持IE\FF\chrome的方法或插件或控件.
谢谢各位了。
目前用的代码:
<meta http-equiv="X-UA-Compatible" content="IE=6" />
<style type="text/css">
.mstheme-bannertxt
{
height: 209px;
width: 605px;
margin-left: 0px;
margin-bottom: 0px;
}
.Freezing
{
position:relative ;
table-layout:fixed;
top:expression(this.scrollTop);
z-index: 10;
}
.Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
</style>
</head>
<body style="height: 1000px;">
<form id="form1" runat="server">
<div class="Freezing">
只需要</div>
<div style="overflow-y: scroll; height: 200px; width: 300px" id="dvBody">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="3"
OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating"
OnRowCancelingEdit="GridView1_RowCancelingEdit" BackColor="White" BorderColor="#CCCCCC"
BorderStyle="None" BorderWidth="1px" Font-Size="12px" OnRowCreated="GridView1_RowCreated"
DataKeyNames="ProductID" DataSourceID="AccessDataSource1">
<FooterStyle BackColor="White" ForeColor="#000066" />
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
</Columns>
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" CssClass="ms-formlabel DataGridFixedHeader" />
<HeaderStyle BackColor="#006699" Font-Bold="True" CssClass="Freezing" />
</asp:GridView>
</div>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Northwind.mdb"
SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice] FROM [Products]">
</asp:AccessDataSource>
...全文
请发表友善的回复…
发表回复
CqCoder 2011-05-26
- 打赏
- 举报
自己顶
CqCoder 2011-05-20
- 打赏
- 举报
自己顶个
wizard1 2011-05-18
- 打赏
- 举报
[Quote=引用 3 楼 nayc 的回复:]
我经常用一个偷懒的方法来表头固定的办法，在gridview上面画一个Table，把标题都写在Table中，
注意的就是宽度要对齐，把gridview的列宽和Table的列宽设置成一样
[/Quote]
聪明简单的办法
我经常用一个偷懒的方法来表头固定的办法，在gridview上面画一个Table，把标题都写在Table中，
注意的就是宽度要对齐，把gridview的列宽和Table的列宽设置成一样
[/Quote]
聪明简单的办法
indusl 2011-05-18
- 打赏
- 举报
正需要，支持
indusl 2011-05-18
- 打赏
- 举报
Windows Server 2003 build 3790 RTM
子夜__ 2011-05-18
- 打赏
- 举报
<div style="overflow-y: scroll; height: 200px">
<asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF"
GridLines="Both" CellPadding="4" Width="560">
<HeaderStyle BackColor="#EDEDED" Height="26px" />
</asp:GridView>
</div>
小童 2011-05-18
- 打赏
- 举报
这是一个参考参考
<Script language = "JavaScript">
var tdW;
//Scroll
function f_scroll(Col_T,Row_T,DivNm){
if(Col_T!=''){
document.getElementById(Col_T).scrollLeft = document.getElementById(DivNm).scrollLeft;
}
if(Row_T!=''){
document.getElementById(Row_T).scrollTop = document.getElementById(DivNm).scrollTop;
}
}
//Write table cell
function writeTD(trNum,tdNum,tdHead,content){
var i;
for(i=0;i<=tdNum;i++){
document.write(tdHead);
if(content != ''){
document.write(content);
} else {
document.write(trNum+","+i);
}
document.write("</TD>");
}
}
//Write table Row
function writeTR(trNum,tdNum,tdHead,content){
var i;
for(i=0;i<=trNum;i++){
document.write("<TR>");
writeTD(i,tdNum,tdHead,content);
document.write("</TR>");
}
}
</Script>
<TABLE BORDER=0 STYLE="POSITION:ABSOLUTE;LEFT: 0px;TOP: 0px;right: 0px;
bottom: 0px;background-color: khaki;">
<TR>
<TD STYLE="text-align:right;">
<!--Table1 start-->
<Div ID="Table1"
STYLE="position:relative;top:5;left:4;border-bottom: 0.5pt solid white;
width:26.25px;height:20px;">
<TABLE BORDER=0 STYLE="border-collapse:collapse;text-align:center;
width:26.25px;height:20px;">
<TR>
<TD NOWRAP
STYLE="width:60px;height:40;background-color:silver;
color:#FFFFFF;border-right: 0.5pt solid white;
word-break:break-all;border:0.5pt solid black;">
</TD>
</TR>
</TABLE>
</Div>
<!--Table1 end-->
</TD>
<TD>
<!--Table2 start-->
<Div ID="Table2"
STYLE="position:relative; top:5;border-bottom: 0.5pt solid white;
height:20px; width:481px;overflow-x:hidden;">
<TABLE BORDER=0
STYLE="border-collapse:collapse;background-color:#003399;
color: #FFFFFF;text-align:center;height:40px;">
<TR>
<script language=javascript>
tdW='<TD NOWRAP STYLE="width:100px;background-color:silver;'+
'color:black;border-color:#silver;border:0.5pt solid black;'+
'border-left:0;word-break:break-all;">';
writeTD(0,20,tdW,'');
</script>
</TR>
</TABLE>
</Div>
<!--Table2 end-->
</TD>
</TR>
<TR>
<TD STYLE="vertical-align:top; ">
<!--Table3 start-->
<Div ID="Table3"
STYLE="border-bottom: 0.5pt solid black;width:26.25px; height:265px;
overflow-y:hidden; position:relative;left:4;">
<TABLE BORDER=0
STYLE="border-collapse:collapse;background-color:#FFFFFF;
color:#000000;height:20px;">
<script language=javascript>
tdW='<TD NOWRAP STYLE="width:60px;height:22px;text-align:center;'+
'border-left: 0.5pt solid black;border-right: 0.5pt solid black;'+
'border-bottom: 0.5pt solid black;word-break: break-all;'+
'background-color:silver;">';
writeTR(30,0,tdW,'');
</script>
</TABLE>
</Div>
<!--Table3 end-->
</TD>
<TD STYLE="vertical-align:top; ">
<!--Table4 start-->
<Div ID="Table4"
onScroll="f_scroll('Table2','Table3','Table4');"
STYLE="height:281px; width:497px;overflow-y:scroll;overflow-x:scroll;">
<TABLE BORDER=0 STYLE="border-collapse:collapse;">
<script language=javascript>
tdW='<TD NOWRAP STYLE="width:100px;height:22px;background-color:#ffffff;'+
'border-right:0.5pt solid black;border-bottom:0.5pt solid black;'+
'word-break: break-all; text-align:center;">';
writeTR(30,20,tdW,'');
</script>
</TABLE>
</Div>
<!--Table4 end-->
</TD>
</TR>
</TABLE>
CqCoder 2011-05-18
- 打赏
- 举报
[Quote=引用 3 楼 nayc 的回复:]
我经常用一个偷懒的方法来表头固定的办法，在gridview上面画一个Table，把标题都写在Table中，
注意的就是宽度要对齐，把gridview的列宽和Table的列宽设置成一样
[/Quote]
这种思路考虑过~~主要是要设置宽度和内容一致,
我想问下 有木有js控制 表头宽度和内容宽度自适应的方法？或者有没有成熟的插件可以用？
我经常用一个偷懒的方法来表头固定的办法，在gridview上面画一个Table，把标题都写在Table中，
注意的就是宽度要对齐，把gridview的列宽和Table的列宽设置成一样
[/Quote]
这种思路考虑过~~主要是要设置宽度和内容一致,
我想问下 有木有js控制 表头宽度和内容宽度自适应的方法？或者有没有成熟的插件可以用？
nayc 2011-05-17
- 打赏
- 举报
我经常用一个偷懒的方法来表头固定的办法，在gridview上面画一个Table，把标题都写在Table中，
注意的就是宽度要对齐，把gridview的列宽和Table的列宽设置成一样
注意的就是宽度要对齐，把gridview的列宽和Table的列宽设置成一样
CqCoder 2011-05-17
- 打赏
- 举报
[Quote=引用 1 楼 baoshiqiang 的回复:]
http://www.programbbs.com/doc/674.htm 这个支持IE9和FF
[/Quote]
测试过 不支持IE6、FF
http://www.programbbs.com/doc/674.htm 这个支持IE9和FF
[/Quote]
测试过 不支持IE6、FF
BaoShiqiang 2011-05-17
- 打赏
- 举报
http://www.programbbs.com/doc/674.htm 这个支持IE9和FF
