为什么我无法获得CSS&这个GridView中的JQuery效果?

时间:2012-01-15 12:35:31

标签: c# jquery asp.net css

我正在尝试在我的项目中使用这篇关于(Freezing GridView header and columns while scrolling rest of the content)的好文章,但我失败了。我按照帖子中提到的所有步骤,但仍然没有得到它,我不知道为什么。

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

  

Char:9

     

错误:'0.offsetHeight'为null或不是对象

     

代码:0

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

  

Char:11

     

错误:对象不支持此属性或方法

     

代码: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;

    }

1 个答案:

答案 0 :(得分:1)

最后,我能够解决问题。实际上,教程没有提到我们需要添加更多的javascript文件: 的 * sh_javascript.js * &安培; * sh_main.js * 已完成in this demo