javascript - 如何在 ASP.NET 中冻结 GridView 中的列？

Question

我在网上搜索了很多方法和解决方案，但没有一个适用于我的项目。谁能帮忙看看有没有解决办法，下面是我的代码

 <table class="NormalTable" id="tblResult" runat="server">
            <tr>
                <td>
                    <input id="saveScrollPos" type="hidden" name="saveScrollPos" runat="server">
                    <%--update by tarlor 2020-7-1 WIDTH:955px to 41% and  HEIGHT:575px to 630px--%>

                    <div style="behavior: url(component/ScrollPos.htc); overflow: auto; width: 41%; height: 630px" scrollpos="<%= saveScrollPos.Value %>" persistid="<%= saveScrollPos.UniqueID %>">

                        <asp:GridView ID="gvVoue" runat="server" CssClass="NormalDatagrid" Width="4570px" CellPadding="0" CellSpacing="0" OnRowDataBound="gvVoue_RowDataBound"
                            OnPageIndexChanging="gvVoue_PageIndexChanging" OnSorting="gvVoue_Sorting" OnItemCreated="gvVoue_ItemCreated" PageSize="<%# inConstant.SapRecPerPage_VOUE %>"
                            AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False">

                            <AlternatingRowStyle CssClass="NormalRowBg2"></AlternatingRowStyle>
                            <RowStyle CssClass="NormalRowBg1"></RowStyle>
                            <HeaderStyle CssClass="NormalColHead" Height="16px"></HeaderStyle>
                            <PagerStyle HorizontalAlign="Left" CssClass="LockNormalRowPager"></PagerStyle>

                            <Columns>

                                <asp:TemplateField ItemStyle-Wrap="False">
                                    <HeaderStyle Width="30px" CssClass="DgLockedCol"></HeaderStyle>
                                    <ItemStyle CssClass="DgLockedCol"></ItemStyle>
                                    <ItemTemplate>
                                        <%# inGlobal.HtmlEncode((string) DataBinder.Eval(Container.DataItem, "ROW_NUM")) %>
                                    </ItemTemplate>
                                </asp:TemplateField>

                                <asp:TemplateField ItemStyle-Wrap="False">
                                    <HeaderStyle CssClass="DgLockedCol" Width="20px"></HeaderStyle>
                                    <ItemStyle CssClass="DgLockedCol" HorizontalAlign="Center"></ItemStyle>
                                    <ItemTemplate>
                                        <asp:ImageButton runat="server" ID="btnView" ImageUrl="Images\view2.gif" CommandName="Details" ToolTip="View Details" CommandArgument='<%#(string)DataBinder.Eval(Container.DataItem, "COMP_CODE")+","+(string)DataBinder.Eval(Container.DataItem, "ACCT_DOC_NO")+","+(string)DataBinder.Eval(Container.DataItem, "FISCAL_YR") %>' OnClick="gvVoue_ViewDetails"></asp:ImageButton>
                                    </ItemTemplate>
                                </asp:TemplateField>

                                <asp:TemplateField ItemStyle-Wrap="False">
                                    <HeaderStyle CssClass="DgLockedCol" Width="20px"></HeaderStyle>
                                    <ItemStyle CssClass="DgLockedCol" HorizontalAlign="Center"></ItemStyle>
                                    <ItemTemplate>
                                        &nbsp;
                                            <asp:ImageButton runat="server" ID="btnViewImage" ImageUrl="Images\spacer.gif" CommandName="Image" ToolTip="View Image" CommandArgument='' OnClick="gvVoue_ViewImage"></asp:ImageButton>
                                    </ItemTemplate>
                                </asp:TemplateField>

                                <asp:TemplateField ItemStyle-Wrap="False">
                                    <HeaderStyle Width="100px" CssClass="DgLockedCol" HorizontalAlign="Center"></HeaderStyle>
                                    <ItemStyle CssClass="DgLockedCol" HorizontalAlign="Center"></ItemStyle>
                                    <HeaderTemplate>
                                        <zz:zzSortButton ID="btnCompCode" runat="server" CommandName="<%#DataGrid.SortCommandName%>" CommandArgument="COMP_CODE" CssClass="DGColHeadLinkButton" DefaultSort="False">Comp. Code*</zz:zzSortButton>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <%# inGlobal.HtmlEncode((string)DataBinder.Eval(Container.DataItem, "COMP_CODE"))%>
                                    </ItemTemplate>
                                </asp:TemplateField>

                                <asp:TemplateField ItemStyle-Wrap="False">
                                    <HeaderStyle Width="80px" CssClass="DgLockedCol" HorizontalAlign="Center"></HeaderStyle>
                                    <ItemStyle CssClass="DgLockedCol" HorizontalAlign="Center"></ItemStyle>
                                    <HeaderTemplate>
                                        <zz:zzSortButton ID="btnDocNo" runat="server" CommandName="<%#DataGrid.SortCommandName%>" CommandArgument="ACCT_DOC_NO" CssClass="DGColHeadLinkButton" DefaultSort="False">Doc. No.*</zz:zzSortButton>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <%# inGlobal.HtmlEncode((string)DataBinder.Eval(Container.DataItem, "ACCT_DOC_NO"))%>
                                    </ItemTemplate>
                                </asp:TemplateField>

                                <asp:TemplateField ItemStyle-Wrap="False">
                                    <HeaderStyle Width="90px" CssClass="DgLockedCol" HorizontalAlign="Center"></HeaderStyle>
                                    <ItemStyle CssClass="DgLockedCol" HorizontalAlign="Center"></ItemStyle>
                                    <HeaderTemplate>
                                        <zz:zzSortButton ID="btnFiscalYr" runat="server" CommandName="<%#DataGrid.SortCommandName%>" CommandArgument="FISCAL_YR" CssClass="DGColHeadLinkButton" DefaultSort="False">Fiscal Year*</zz:zzSortButton>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <%# inGlobal.HtmlEncode((string)DataBinder.Eval(Container.DataItem, "FISCAL_YR"))%>
                                    </ItemTemplate>
                                </asp:TemplateField>
                           </Columns>
                        </asp:GridView>
                    </div>
                </td>
            </tr>
        </table>

下面是我的css代码

.DgLockedCol {
    position: relative;
    left: 0;
    border-top: none;
    border-bottom: grey 1px solid;
    border-left: grey 1px solid;
    border-right: grey 1px solid;
    z-index: 10;
}

这个方案在IE浏览器上可以正常使用，但是升级到Edge或者Chrome就看不出效果了，这个我试过很多变种，好像都没有。有任何想法吗？

标签： javascriptcssasp.netgridviewcss-position