如何在asp.net网格视图中冻结最初的2 -3最左列？因此,当水平滚动时,始终显示已冻结的初始2 – 3列.
任何答案？
解决方法
是的,似乎有可能用一些css魔法,虽然这附带溢出的警告：滚动可能不是100％便携式(我已经在IE 8/9和Chrome FWIW上测试过)
看看这个jsFiddle here
我用来生成GridView的ASPX如下所示.
请注意,css类分别固定和滚动固定和滚动列(应用于标题和项目)
但真正的工作是在CSS中完成的.请特别注意,您需要使列宽正确,以适应左侧固定的td / th.
ASPX
<div id="scrolledGridView">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="ID" HeaderText="Col 1">
<HeaderStyle CssClass="pinned col1"></HeaderStyle>
<ItemStyle CssClass="pinned col1"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Column 2">
<HeaderStyle CssClass="pinned col2"></HeaderStyle>
<ItemStyle CssClass="pinned col2"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Description" HeaderText="Column 3">
<HeaderStyle CssClass="scrolled"></HeaderStyle>
<ItemStyle CssClass="scrolled"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Cost" HeaderText="Column 4">
<HeaderStyle CssClass="scrolled"></HeaderStyle>
<ItemStyle CssClass="scrolled"></ItemStyle>
</asp:BoundField>
</Columns>
</asp:GridView>
CSS
#scrolledGridView
{
overflow-x: scroll;
text-align: left;
width: 400px; /* i.e. too small for all the columns */
}
.pinned
{
position: fixed; /* i.e. not scrolled */
background-color: White; /* prevent the scrolled columns showing through */
z-index: 100; /* keep the pinned on top of the scrollables */
}
.scrolled
{
position: relative;
left: 150px; /* i.e. col1 Width + col2 width */
overflow: hidden;
white-space: nowrap;
min-width: 500px; /* set your real column widths here */
}
.col1
{
left: 0px;
width: 50px;
}
.col2
{
left: 50px; /* i.e. col1 Width */
width: 100px;
}
