gridview 固定表头,滚动在里面的,比前面的写的好看,css实现
这个grid写的有点乱了,主要的是外面的div,和里面的grid关系不是很大
<div id="div-gridview" style="height:520px;">
<asp:GridView ID="GridView1" runat="server" SkinID="AllowPage" AllowPaging="false" Width="98%"
OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDeleting="GridView1_RowDeleting" AutoGenerateColumns="False"
DataKeyNames="CountyId" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDataBound="GridView1_RowDataBound"
OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkboxAll" runat="server" Text="全选" OnCheckedChanged="CheckAll" AutoPostBack="true" />
</HeaderTemplate>
<ItemStyle HorizontalAlign="Left" Width="50px" />
<HeaderStyle HorizontalAlign="Left" Width="50px" />
<ItemTemplate>
<asp:CheckBox ID="checkboxDan" runat="server" />
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("CountyId") %>' />
<asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Eval("IntId") %>' />
<asp:HiddenField ID="HiddenField3" runat="server" Value='<%# Eval("BtsName") %>' />
<asp:HiddenField ID="HiddenField4" runat="server" Value='<%# Eval("Lac") %>' />
<asp:HiddenField ID="HiddenField5" runat="server" Value='<%# Eval("CellId") %>' />
<asp:HiddenField ID="HiddenField6" runat="server" Value='<%# Eval("CellDesc") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CountyName" HeaderText="乡镇名">
<ItemStyle Wrap="True" />
<HeaderStyle Wrap="False" />
</asp:BoundField>
<asp:ButtonField CommandName="see" HeaderText="查看小区" Text="点击查看" />
<asp:CommandField ShowEditButton="True" EditText="编辑" UpdateText="更新" CancelText="取消">
<HeaderStyle Wrap="False" />
<ItemStyle Wrap="False" />
</asp:CommandField>
<asp:CommandField ShowDeleteButton="True" DeleteText="删除">
<HeaderStyle Wrap="False" />
<ItemStyle Wrap="False" />
</asp:CommandField>
</Columns>
<PagerStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:GridView></div>
再加上这个.css就ok了
/* Div container to wrap the datagrid */
div#div-gridview {
width: 100%;
height: 160px;
overflow: auto;
}
![](/Images/OutliningIndicators/None.gif)
div#div-gridview1
{
width: 420px;
height: 200px;
overflow: auto;
}
![](/Images/OutliningIndicators/None.gif)
div#div-gridview2
{
width: 420px;
height: 200px;
overflow: auto;
}
![](/Images/OutliningIndicators/None.gif)
div#div-gridview3
{
height: 0px;
overflow: auto;
}
/* Locks the left column */
td.locked, th.locked {
![](/Images/OutliningIndicators/InBlock.gif)
position:relative;
![](/Images/OutliningIndicators/InBlock.gif)
left: expression(document.getElementById("div-gridview3").scrollLeft-2); /*IE5+ only*/
}
![](/Images/OutliningIndicators/None.gif)
/* Locks table header */
th {
![](/Images/OutliningIndicators/InBlock.gif)
position:relative;
top:expression(document.getElementById("div-gridview3").scrollTop-1); /*IE5+ only*/
z-index: 10;
}
![](/Images/OutliningIndicators/None.gif)
/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;}
![](/Images/OutliningIndicators/None.gif)
/* DataGrid Item and AlternatingItem Style
.GridRow {font-size: 10pt; color: black; font-family: Arial; background-color:#ffffff; height:35px;}
.GridAltRow {font-size: 10pt; color: black; font-family: Arial; background-color:#eeeeee; height:35px;}
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
*/
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
其实里面只要有
div#div-gridview {
width: 100%;
height: 160px;
overflow: auto;
}
就可以了,但是为什么还有其他3个呢,因为有的时候页面要求多个gridview,这个时候你只写一个,其他的也会跟着动起来,所以写一个别的名,这样就不影响了
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
再加上这个.css就ok了
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
div#div-gridview {
width: 100%;
height: 160px;
overflow: auto;
}
就可以了,但是为什么还有其他3个呢,因为有的时候页面要求多个gridview,这个时候你只写一个,其他的也会跟着动起来,所以写一个别的名,这样就不影响了