带有冻结标题和前四列的 GridView？

Posted 2023-03-06

【中文标题】带有冻结标题和前四列的 GridView？

【英文标题】：GridView with frozen Header and First Four columns?

【发布时间】：2012-03-04 02:31:20

【问题描述】：

我需要开发一个带有滚动和冻结的第一列和标题的 GridView。我在网上进行了大量搜索，发现很多资源都不适用于我，我不知道为什么。例如，现在我正在使用this simple tutorial 来执行此操作，但我得到了以下不好的外观：

为了冻结标题，我使用了这个 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>

谁能帮我解决这个问题？

【参考方案1】：

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

这是一个例子

http://fixedheadertable.com/livedemos/

【讨论】：

在 GridView 中使用这个 JQuery 有什么例子吗？

@AliAhmed 诀窍是用 css 和 div 完成的，不需要 jQuery，如果你立即这样做可能会有所帮助，但首先你需要了解你必须做什么。

好的，请告诉我我应该怎么做。我真的在这个问题上苦苦挣扎，这就是我在这里问的原因。

@AliAhmed 阅读了这个例子，fixedheadertable.com/livedemos 它解释得很好，它的 jQuery 也是。您将表格分成 2 个 div，一个是滚动的，另一个是静态的。

【参考方案2】：

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

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

【讨论】：

您的建议现在将冻结标题，但它会使其在 div 中。怎么冷冻？

你有我可以看看的代码示例吗？没有例子有点难以理解。您可以尝试将您的代码复制到 jsfiddle.net 或 dabblet.com

【参考方案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>

【讨论】：

您可以通过发布对您所做工作的解释来改进此答案。问你如何解决他们的问题的人可能不清楚。