c# - 为什么我无法在这个 GridView 中获得 CSS & JQuery 效果？

Question

我想在我的元素中使用这篇关于 ( Freezing GridView header and columns while scrolling rest of the content) 的好文章，但我失败了。我按照帖子中提到的所有步骤进行操作，但我仍然没有明白为什么，我也不知道为什么。

我得到了带有数据但没有 CSS 和 JQuery 效果的 GridView。我在 IE 浏览器的左下角看到错误符号，上面写着:

Char: 9

Error: '0.offsetHeight' is null or not an object

Code:0

此外，有时它会给我以下错误:

Char: 11

Error: Object doesn't support this property or method

Code:0

顺便说一下，当我在 ASP.NET 代码中删除 CSS 样式下存在的内联 JavaScript 时，我没有得到那个错误符号我的 ASP.NET 代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/jquery.fixedtable.js" type="text/javascript"></script>
        <%--This is for the GridView--%>
        <style type="text/css">

        .fixedColumn .fixedTable td
        {
            color: #FFFFFF;
            background-color: #5097d1;
            font-size: 14px;
            font-weight: normal;
        }

        .fixedHead td, .fixedFoot td
        {
            color: #FFFFFF;
            background-color: #5097d1;
            font-size: 14px;
            font-weight: normal;
            padding: 5px;
            border: 1px solid #187BAF;
        }
        .fixedTable td
        {
            font-size: 10pt;
            background-color: #FFFFFF;
            padding: 5px;
            text-align: left;
            border: 1px solid #CEE7FF;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {

            $(".tableDiv").each(function () {
                var Id = $(this).get(0).id;
                var maintbheight = 355;
                var maintbwidth = 760;

                $("#" + Id + " .FixedTables").fixedTable({
                    width: maintbwidth,
                    height: maintbheight,
                    fixedColumns: 4,
                    // header style
                    classHeader: "fixedHead",
                    // footer style       
                    classFooter: "fixedFoot",
                    // fixed column on the left       
                    classColumn: "fixedColumn",
                    // the width of fixed column on the left     
                    fixedColumnWidth: 100,
                    // table's parent div's id          
                    outerId: Id,
                    // tds' in content area default background color                    
                    Contentbackcolor: "#FFFFFF",
                    // tds' in content area background color while hover.    
                    Contenthovercolor: "#99CCFF",
                    // tds' in fixed column default background color  
                    fixedColumnbackcolor: "#5097d1",
                    // tds' in fixed column background color while hover.
                    fixedColumnhovercolor: "#99CCFF"
                });
            });
        });
    </script>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                                    ConnectionString="<%$ ConnectionStrings:testConnectionString %>" 
                                    SelectCommandType="StoredProcedure" SelectCommand="kbiReport"
                                    FilterExpression="[DivisionName] like '{0}%'">

                    <FilterParameters>
                        <asp:ControlParameter ControlID="ddlDivision" Name="DivisionName" 
                                                 PropertyName="SelectedValue" Type="String" />
                    </FilterParameters>

                    <SelectParameters>
                        <%--ControlParameter is linked to the HiddenField above to generate different GridView based on different values 
                            of GroupID--%>
                        <asp:ControlParameter ControlID="HiddenField1" Name="GroupID" PropertyName="Value" DefaultValue=3 />
                    </SelectParameters>
                </asp:SqlDataSource>
<%--
                <div style="width:700px; overflow:auto; overflow-y:hidden;">--%>
                <div id="divGrid" class="tableDiv">
                <asp:GridView ID="GridView1" runat="server" 
                                AllowSorting="True" 
                                CellPadding="3" 
                                DataSourceID="SqlDataSource1" 
                                ClientIDMode="Static" class="fixedTables" Width="600" AutoGenerateColumns="true"
                                AlternatingRowStyle-CssClass="alt" 
                                RowStyle-HorizontalAlign="Center" 
                                OnRowDataBound="GridView1_RowDataBound" OnPreRender="GridView1_PreRender" OnRowCreated="GridView1_RowCreated"
                                OnDataBound="GridView1_DataBound">
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                    <HeaderStyle Font-Bold = "true" ForeColor="Black"/> 
                    <Columns>
                    </Columns>
                </asp:GridView>

在代码隐藏中:

 protected void Page_Load(object sender, EventArgs e)
    {

        //Repeater1.DataBind();
        GridView1.DataBind();
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

    }

Answer 1

终于可以解决问题了。实际上，教程并没有提到我们需要添加更多的 javascript 文件，这些文件是:*sh_javascript.js*& *sh_main.js* 完成 in this demo