Question

我需要开发一个带有滚动和frezzed第一列和Header的GridView。我在网上做了大量的搜索，发现很多资源都不适合我，我不知道为什么。例如，现在我使用this simple tutorial来做这件事，但我看到了以下不好看的事情： enter image description here

为了冻结标题，我使用了这个CSS代码：

<style>
            .grid-header
            {
            font-weight: bold;
            font-family: Verdana;
            font-size: 11px;
            background-color: #7A9FCB;
            text-decoration: underline;
            color: #ffffff;
            text-align: left;
            position: relative;
            top:expression(this.parentNode.parentNode.parentNode.scrollTop-2);
            left:expression(this.parentNode.parentNode.parentNode.scrollLeft-1);
            right:1px;
            }
        </style>

有人可以帮我解决这个问题吗？

Answer 1

这个想法是将标题和内容分成2个div，一个是标题，其余的是滚动内容。

这是一个例子

http://fixedheadertable.com/livedemos/

Answer 2

EEP！ css中的表达式在性能上非常昂贵。他们会针对您网页的每个像素或（在某些情况下）鼠标的移动重新评估您的CSS，所以除非您绝对没有其他选项，否则我会避免使用它们。

您是否尝试将CSS position: fixed用于要冻结的部分？

Answer 3

<table>
       <tr><td>
           <asp:GridView ID="grd" runat="server" AutoGenerateColumns="False" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
               <Columns>
                   <asp:TemplateField HeaderText="Name">
                       <ItemTemplate>
                           <asp:Label ID="LblName" runat="server" Text='<%#Bind("EmpId") %>'></asp:Label>
                       </ItemTemplate>
                   </asp:TemplateField>

                    <asp:TemplateField HeaderText="Gender">
                       <ItemTemplate>
                           <asp:Label ID="LblGender" runat="server" Text='<%#Bind("EmpName") %>'></asp:Label>
                       </ItemTemplate>
                   </asp:TemplateField>

                    <asp:TemplateField HeaderText="Hobbies">
                       <ItemTemplate>
                           <asp:Label ID="LblHobbies" runat="server" Text='<%#Bind("EmpSalary") %>'></asp:Label>
                       </ItemTemplate>
                   </asp:TemplateField>


               </Columns>
               <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
               <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
               <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
               <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
               <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
               <SortedAscendingCellStyle BackColor="#FFF1D4" />
               <SortedAscendingHeaderStyle BackColor="#B95C30" />
               <SortedDescendingCellStyle BackColor="#F1E5CE" />
               <SortedDescendingHeaderStyle BackColor="#93451F" />
           </asp:GridView>
           </td></tr>
</table>

带有Freezed Header和前四列的GridView？

3 个答案: