Gridview 冻结窗格 Jscript 运行时错误答案

【问题标题】：Gridview Freeze Panes Jscript runtime errorGridview 冻结窗格 Jscript 运行时错误
【发布时间】：2017-01-20 16:45:19
【问题描述】：

我确定您已经厌倦了这个错误，但我无法弄清楚我的问题是在查看其他人的类似问题。这与 gridview 冻结窗格有关。我有一个非常基本的网络应用程序，它基本上显示了一个网格视图（并且还具有自定义分页功能）。

我已使用此站点尝试在我的网格视图中合并列冻结，以便在您滚动页面时使用此站点： http://gridviewscroll.aspcity.idv.tw/Demo.aspx

这是我得到的错误： Microsoft JScript 运行时错误：对象不支持此属性或方法

它会突出显示以下错误代码：

  function gridviewScroll() {
            $('#<%=gvOpportunity.ClientID%>').gridviewScroll({

            });
        }

这是我的完整代码，不包括 gridview 本身（否则这篇文章会很大）：

    PageSize:
 <asp:DropDownList ID="ddlPageSize" runat="server" AutoPostBack="true" OnSelectedIndexChanged="PageSize_Changed">
<asp:ListItem Text="10" Value="10" />
<asp:ListItem Text="25" Value="25" />
<asp:ListItem Text="50" Value="50" />
<asp:ListItem Text="100" Value="100" />

    <asp:GridView ID="gvOpportunity" runat="server" DataKeyNames="ID" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
    OnRowUpdating="OnRowUpdating" OnRowEditing="OnRowEditing" OnRowCancelingEdit="OnRowCancelingEdit" 
    BorderWidth="0px" CellSpacing="1" CellPadding="1" GridLines="Horizontal" >
        <Columns>

        <asp:TemplateField HeaderText="No." >
                <HeaderStyle Width="50px" HorizontalAlign="Center" />
                <ItemStyle Width="50px" HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:Label ID="lbRowNumber" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

           ...............more template fields...........................

        </Columns>

        <HeaderStyle CssClass="GridviewScrollC1Header" /> 
        <RowStyle CssClass="GridviewScrollC1Item" /> 

    </asp:GridView>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="~/Scripts/gridviewScroll.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            gridviewScroll();
        });


        function gridviewScroll() {
            $('#<%=gvOpportunity.ClientID%>').gridviewScroll({
                freesize: 2
            });
        } 
    </script>




    <asp:Repeater ID="rptPager" runat="server">
        <ItemTemplate>
            <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
                Enabled='<%# Eval("Enabled") %>' OnClick="Page_Changed"></asp:LinkButton>
        </ItemTemplate>
    </asp:Repeater>

</div>

我不知道下一步该做什么，并试图寻找相同的错误，但无法调整解决方案。感谢您在这里提供的任何帮助，如果您需要更多信息，请告诉我。

【问题讨论】：

颠簸 - 没有回复！

标签： c# jquery asp.net gridview jscript

【解决方案1】：

我将自己的最小示例拼凑在一起，它奏效了。我使用来自https://github.com/twlikol/GridViewScroll/blob/master/gridviewScroll.min.js的v0.9.6.8

我已经安装了 IE11。使用“文档模式”下拉菜单使其模拟旧版本，我回顾了 IE 的悲惨历史，它继续在所有模式下工作，除了在模式 5 中关闭大小。

您将 freezesize 拼错为 freesize，但这不会导致 javascript 错误。

页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <asp:GridView ID="gvOpportunity" runat="server" DataKeyNames="ID" AutoGenerateColumns="False">
        <Columns>

        <asp:TemplateField HeaderText="No." >
                <HeaderStyle Width="150px" HorizontalAlign="Center" />
                <ItemStyle Width="150px" HorizontalAlign="Center" />
                <ItemTemplate>
                    <%# Container.DataItemIndex + 1 %>
                </ItemTemplate>
            </asp:TemplateField>

           <asp:TemplateField HeaderText="Foo." >
                <HeaderStyle Width="250px" HorizontalAlign="Center" />
                <ItemStyle Width="250px" HorizontalAlign="Center" />
                <ItemTemplate>
                    FOOBAR FOOBAR FOOBAR
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Bar." >
                <HeaderStyle Width="350px" HorizontalAlign="Center" />
                <ItemStyle Width="350px" HorizontalAlign="Center" />
                <ItemTemplate>
                    lorem ipsum blah lah blah lorem ipsum blah lah blah lorem ipsum blah lah blah lorem ipsum blah lah blah lorem ipsum blah lah blah lorem ipsum blah lah blah lorem ipsum blah lah blah lorem ipsum blah lah blah
                </ItemTemplate>
            </asp:TemplateField>

        </Columns>
    </asp:GridView>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="gridviewScroll.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            gridviewScroll();
        });

        function gridviewScroll() {
            $('#<%=gvOpportunity.ClientID%>').gridviewScroll({
                width: 660,
                height: 200,
                freezesize: 2
            });
        } 
    </script>

    </form>
</body>
</html>

代码隐藏：

using System;

namespace Test
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            gvOpportunity.DataSource = new[] {
                new { ID=1,Value="First" },
                new { ID=2,Value="Second" },
                new { ID=3,Value="Third" },
                new { ID=4,Value="Fourth" }
            };
            gvOpportunity.DataBind();
        }
    }
}

您在分页控件上有回发事件；如果您使用更新面板进行部分回发，则需要重新运行任何脚本来更改更新面板内的内容。

var doStuff = function(){
    //UI enhancements here...
};
//Shorthand for $(document).ready(doStuff);
$(doStuff);
//trigger the function again when an UpdatePanel finishes replacing its contents
var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(doStuff);

【讨论】：