ASP.net表头显示表头、滚动条
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
1、表头和内容的样式:
.gridview_header
{
height: 24px;
width: 98.65%;
overflow-x: hidden;
overflow-y: hidden;
}
.gridview_content
{
height: 110px;
width: 100%;
}
.gridview_rowStyle
{
border: 1px solid #bd7b7b;
text-align: center;
}
.gridview_itemStyle
{
border: 1px solid #bd7b7b;
text-align: center;
}
2、js事件:
<script language="javascript" type="text/javascript">
$(function () {
$(".gridview_content").scroll(function () {
$(".gridview_header").scrollLeft($(".gridview_content").scrollLeft());
});
});
</script>
3、后台绑定信息:
private void SetData()
{
#region
DataTable dt = new DataTable();
dt.Columns.Add("ROWNO");
dt.Columns.Add("ROWSTATENAME");
dt.Columns.Add("NETPOINTNAME");
for (int i = 0; i < 20; i++)
{
DataRow dr = dt.NewRow();
dr["ROWNO"] = i.ToString();
dr["ROWSTATENAME"] = "有效";
dr["NETPOINTNAME"] = "深圳";
dt.Rows.Add(dr);
}
this.gridView.DataSource = dt;
this.gridView.DataBind();
this.gridView1.DataSource = dt;
this.gridView1.DataBind();
#endregion
}
4、界面代码:
<div class="gridview_header">
<table cellspacing="2" cellpadding="2" rules="all" border="1" id="GvGoods_sum_head"
style="width: 2000px; height: 100%; border-collapse: collapse;">
<tr align="left" style="background-color: #FCB5AF; height: 100%">
<th scope="col" align="center" style="width: 1.5%;">
明细号
</th>
<th scope="col" style="width: 2%;">
明细状态
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
<th scope="col" style="width: 4%;">
网点名称
</th>
</tr>
</table>
</div>
<div class="gridview_content" style="overflow-x: scroll; overflow-y: scroll;">
<asp:GridView ID="gridView" runat="server" AllowPaging="True" PageSize="100" AutoGenerateColumns="false"
Width="2000px" rules="all" border="1" ShowHeader="false" CellSpacing="2" CellPadding="2">
<Columns>
<asp:BoundField DataField="ROWNO" HeaderText="明细号" ItemStyle-HorizontalAlign="Center"
HeaderStyle-Width="1.5%">
<ItemStyle HorizontalAlign="Center" Wrap="true" CssClass="gridview_itemStyle" Width="1.5%"
VerticalAlign="Middle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="ROWSTATENAME" HeaderText="明细状态" HeaderStyle-Width="2%">
<ItemStyle HorizontalAlign="Center" Width="2%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
<ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
</asp:BoundField>
</Columns>
<HeaderStyle CssClass="gridview_itemStyle" />
<RowStyle CssClass="gridview_rowStyle" Wrap="true" />
<PagerSettings Visible="False" />
<HeaderStyle HorizontalAlign="Center" BackColor="#FCB5AF" />
</asp:GridView>
</div>