jquery - 部分回发后，可脚注脚本不适用于更新面板中的 GridView

Question

我在 webforms 应用程序中为 ASP.Net GridView (ASP.NET 4.5) 使用可脚注 (V2) 脚本/CSS，以使表格响应（调整大小并隐藏不同设备的适当列）。出于显而易见的原因，我希望 GridView 位于 updatePanel 中，但是，在任何部分回发时，不会执行可加载脚本（即使我将脚本引用直接放在 UpdatePanel 中）。然而，jQuery 和 Bootstrap 脚本工作得很好（看图）。无论我使用内置pageLoad()函数还是$(document).ready加载它，footable_redraw函数都无济于事（或两者）功能。我将 ToolkitScriptManager 从 MasterPage 中取出，但这根本没有区别。我从 TKSM 中删除了 ScriptReferences 以查看是否有帮助，但这没有任何区别。我尝试了来自各个论坛的数百种技术，但还没有任何答案有效（而且，可疑的是，没有人发布过完整的有效解决方案）。也许这根本不可能 w/footable，我不知道。

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/SiteBS.Master" CodeBehind="TestSearch1.aspx.vb" Inherits="SearchWebsite.TestSearch1" Async="True" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph1" runat="server">
    <%-- NOTE: putting the toolkitscriptmanager on the master page or this page, no difference. loadscriptsbeforeUI setting makes no difference
        jQuery and bootStrap are loaded via tags in the master page header, loading in TKSM makes no difference --%>
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="tksm1" LoadScriptsBeforeUI="False">
    </ajaxToolkit:ToolkitScriptManager>
    <div class="container">
        <asp:UpdatePanel ID="up1" runat="server" EnableViewState="False">

            <ContentTemplate>
                <%-- NOTE: this script cannot go into scriptmanager as it will NOT WORK!!! Yet it won't work on partial postback --%>
                <script type="text/javascript" src="Scripts/FooTable-2/dist/footable.min.js"></script>


                <%-- Set minimum column widths --%>
                <style type="text/css">
                    .hdrVdr { min-width: 80px; }
                    .hdrMan { min-width: 128px; }
                    .hdrCal { min-width: 88px; }
                    .hdrGW { min-width: 88px; }
                    .hdrProd { }
                    .hdrPrice { min-width: 108px; }
                    .hdrCR { min-width: 95px; }
                </style>


                <asp:GridView ID="grdHG" runat="server" AutoGenerateColumns="False" DataSourceID="odsHGSearch" EnableViewState="False" CellPadding="1" AllowSorting="True">
                    <Columns>
                        <asp:TemplateField HeaderText="Vendor" SortExpression="vendor" HeaderStyle-CssClass="hdrVdr">
                            <ItemTemplate>
                                <asp:Label ID="lblVdr" runat="server" Text='<%# Eval("vendor") %>'></asp:Label>
                                <asp:HiddenField ID="hididx" runat="server" Value='<%# Eval("idx")%>' />
                                <asp:HiddenField ID="hidlid" runat="server" Value='<%# Eval("lid")%>' />
                                <asp:HiddenField ID="hidUpdated" runat="server" Value='<%# Eval("Updated")%>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Manufacturer" SortExpression="manufacturer" HeaderStyle-CssClass="hdrMan">
                            <ItemTemplate>
                                <asp:Label ID="lblMan" runat="server" Text='<%# Bind("manufacturer") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Caliber" SortExpression="caliber_gauge_bore" HeaderStyle-CssClass="hdrCal">
                            <ItemTemplate>
                                <asp:Label ID="lblCal" runat="server" Text='<%# Bind("caliber_gauge_bore") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Grn/Wt" SortExpression="grains_weight" HeaderStyle-CssClass="hdrGW">
                            <ItemTemplate>
                                <asp:Label ID="lblGW" runat="server" Text='<%# Bind("grains_weight") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Product" SortExpression="product_name" HeaderStyle-CssClass="hdrProd">
                            <ItemTemplate>
                                <asp:Label ID="lblProd" runat="server" Text='<%# Bind("product_name") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Price" SortExpression="price" HeaderStyle-CssClass="hdrPrice ">
                            <ItemTemplate>
                                <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("Price", "{0:c}") & "/" & Eval("units") & "<br/>(" & Eval("total_rounds") & ")"%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Cost/Rnd" SortExpression="price_per_round" HeaderStyle-CssClass="hdrCR">
                            <ItemTemplate>
                                <asp:Label ID="lblCR" runat="server" CssClass='<%# "Status" & Eval("stock_status")%>' Text='<%# Eval("price_per_round", "{0:c}")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

                <script type="text/javascript">
                    function pageLoad() {
                        // does not completely work - the row styles remain after postback, but header styles disappear and responsive part does not work
                        $(document).ready(function () {
                            $('[id$=grdHG]').footable();
                            $('[id$=grdHG]').trigger('footable_redraw'); // does absolutely nothing
                        });
                    }
                </script>

                <script type="text/javascript">
                    $(function () {
                        $('[id$=grdHG]').footable({
                            breakpoints: {
                                phone: 480,
                                tablet: 1024
                            }
                        });
                    });

                </script>

            </ContentTemplate>
        </asp:UpdatePanel>
</div>

代码隐藏：

Imports AppCore
Imports AppCore.AppCore
Imports AppCore.AppCore.Xutilities
Imports System.Configuration
Imports Microsoft.VisualBasic

Public Class TestSearch1
    Inherits System.Web.UI.Page

    Private Sub testBS3_PreInit(sender As Object, e As EventArgs) Handles Me.PreInit
        HGSearch_Data.DBConnStr = System.Configuration.ConfigurationManager.ConnectionStrings("DefaultConnection").ToString
    End Sub

    Private Sub grdHG_Load(sender As Object, e As EventArgs) Handles grdHG.Load
        'If Not Me.tksm1.IsInAsyncPostBack Then 'NOTE a futile attempt here to see if this worked, it did not.
        grdHG.HeaderRow.TableSection = TableRowSection.TableHeader
        'End If
    End Sub

    Private Sub grdHG_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles grdHG.RowDataBound
        If e.Row.RowType = DataControlRowType.Header Then
            'vendor
            e.Row.Cells(0).Attributes.Add("data-class", "expand")
            'manufacturer
            e.Row.Cells(1).Attributes.Add("data-hide", "phone")
            'caliber
            e.Row.Cells(2).Attributes.Add("data-hide", "phone")
            'product
            e.Row.Cells(4).Attributes.Add("data-hide", "phone,tablet")


        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            'todo

        End If

    End Sub

    Private Sub grdHG_Sorting(sender As Object, e As GridViewSortEventArgs) Handles grdHG.Sorting
        'todo for server side sorting
    End Sub
End Class

母版页：

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="SiteBS.master.vb" Inherits="SearchWebsite.SiteBS" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><%: Page.Title %>- Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="Scripts/FooTable-2/css/footable.core.min.css" rel="stylesheet" />
    <link href="Scripts/FooTable-2/css/footable.metro.min.css" rel="stylesheet" />

    <style type="text/css">
        body { margin-bottom: 80px; }
        .panel-body { padding-top: 0; }
        .page-header { margin-top: 0; }
        .featuredImg { margin-bottom: 15px; }
        .StatusO { color: #990000; font-weight: bold; }
        .StatusI { color: #006600; font-weight: bold; }
        .StatusB { color: #ff9900; font-weight: bold; }
    </style>

    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <script type="text/javascript" src="Scripts/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
    <%-- NOTE: Footable won't work in UpdatePanel w/script reference here   <script type="text/javascript" src="Scripts/FooTable-2/dist/footable.min.js"></script>--%>
</head>
<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <a class="navbar-brand" href="#">Test 115</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right ">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#myaccount">My Account</a></li>
                    <li><a href="#about">About</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">FaceBook</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Google</a></li>
                        </ul>
                    </li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#login" data-toggle="modal">Login</a></li>
                </ul>
            </div>
        </div>
    </div>
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="cph1" runat="server">
        </asp:ContentPlaceHolder>
    </form>
    <div class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            <p class="navbar-text pull-left">Copyright 2003-<%=Now.Year%> Test</p>
            <a href="#" class="navbar-btn btn-info btn pull-right ">Extra</a>
        </div>
    </div>

</body>
</html>

所有的 Bootstrap 代码（页眉、页脚、菜单）都可以正常工作，并且 jQuery 在回发后可以正常工作，除了 GridView 表中的标题行（TH）之外，可脚注的 CSS 主题也可以正常工作。我难住了！

补充：这是我的新代码 - 我消除了 MasterPage 和 UpdatePanel 作为为什么这只适用于第一页加载的罪魁祸首

ASPX：

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestSearch2.aspx.vb" Inherits="SearchWebsite.TestSearch2" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test 2</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
        <link href="Scripts/FooTable-2/css/footable.core.min.css" rel="stylesheet" />
        <link href="Scripts/FooTable-2/css/footable.metro.min.css" rel="stylesheet" />

        <style type="text/css">
            body { margin-bottom: 80px; }
            .panel-body { padding-top: 0; }
            .page-header { margin-top: 0; }
            .featuredImg { margin-bottom: 15px; }
            .StatusO { color: #990000; font-weight: bold; }
            .StatusI { color: #006600; font-weight: bold; }
            .StatusB { color: #ff9900; font-weight: bold; }
        </style>

        <script type="text/javascript" src="Scripts/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
        <script type="text/javascript" src="Scripts/FooTable-2/dist/footable.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">

            <div class="container">


                <%-- Set minimum column widths --%>
                <style type="text/css">
                    .hdrVdr { min-width: 80px; }
                    .hdrMan { min-width: 128px; }
                    .hdrCal { min-width: 88px; }
                    .hdrGW { min-width: 88px; }
                    .hdrProd { }
                    .hdrPrice { min-width: 108px; }
                    .hdrCR { min-width: 95px; }
                </style>


                <asp:GridView ID="grdHG" runat="server" AutoGenerateColumns="False" DataSourceID="odsHGSearch" EnableViewState="False" CellPadding="1" AllowSorting="True">
                    <Columns>
                        <asp:TemplateField HeaderText="Vendor" SortExpression="vendor" HeaderStyle-CssClass="hdrVdr">
                            <ItemTemplate>
                                <asp:Label ID="lblVdr" runat="server" Text='<%# Eval("vendor") %>'></asp:Label>
                                <asp:HiddenField ID="hididx" runat="server" Value='<%# Eval("idx")%>' />
                                <asp:HiddenField ID="hidlid" runat="server" Value='<%# Eval("lid")%>' />
                                <asp:HiddenField ID="hidUpdated" runat="server" Value='<%# Eval("Updated")%>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Manufacturer" SortExpression="manufacturer" HeaderStyle-CssClass="hdrMan">
                            <ItemTemplate>
                                <asp:Label ID="lblMan" runat="server" Text='<%# Bind("manufacturer") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Caliber" SortExpression="caliber_gauge_bore" HeaderStyle-CssClass="hdrCal">
                            <ItemTemplate>
                                <asp:Label ID="lblCal" runat="server" Text='<%# Bind("caliber_gauge_bore") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Grn/Wt" SortExpression="grains_weight" HeaderStyle-CssClass="hdrGW">
                            <ItemTemplate>
                                <asp:Label ID="lblGW" runat="server" Text='<%# Bind("grains_weight") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Product" SortExpression="product_name" HeaderStyle-CssClass="hdrProd">
                            <ItemTemplate>
                                <asp:Label ID="lblProd" runat="server" Text='<%# Bind("product_name") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Price" SortExpression="price" HeaderStyle-CssClass="hdrPrice ">
                            <ItemTemplate>
                                <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("Price", "{0:c}") & "/" & Eval("units") & "<br/>(" & Eval("total_rounds") & ")"%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Cost/Rnd" SortExpression="price_per_round" HeaderStyle-CssClass="hdrCR">
                            <ItemTemplate>
                                <asp:Label ID="lblCR" runat="server" CssClass='<%# "Status" & Eval("stock_status")%>' Text='<%# Eval("price_per_round", "{0:c}")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>



                <script type="text/javascript">
                    $(function () {
                        $('[id$=grdHG]').footable({
                            breakpoints: {
                                phone: 480,
                                tablet: 1024
                            }
                        });
                    });

                </script>



            </div>
            <asp:ObjectDataSource ID="odsHGSearch" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetLive_ItemsByPageSort" TypeName="AppCore.HGSearch_Data" SortParameterName="sortExpression" SelectCountMethod="CountHGSearchs">

...
            </asp:ObjectDataSource>


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

新代码背后：

Imports AppCore
Imports AppCore.AppCore
Imports AppCore.AppCore.Xutilities
Imports System.Configuration
Imports Microsoft.VisualBasic

Public Class TestSearch2
    Inherits System.Web.UI.Page

    Private Sub testBS3_PreInit(sender As Object, e As EventArgs) Handles Me.PreInit
        HGSearch_Data.DBConnStr = System.Configuration.ConfigurationManager.ConnectionStrings("DefaultConnection").ToString
    End Sub

    Private Sub grdHG_Load(sender As Object, e As EventArgs) Handles grdHG.Load
        grdHG.HeaderRow.TableSection = TableRowSection.TableHeader
    End Sub

    Private Sub grdHG_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles grdHG.RowDataBound
        If e.Row.RowType = DataControlRowType.Header Then
            'vendor
            e.Row.Cells(0).Attributes.Add("data-class", "expand")
            'manufacturer
            e.Row.Cells(1).Attributes.Add("data-hide", "phone")
            'caliber
            e.Row.Cells(2).Attributes.Add("data-hide", "phone")
            'product
            e.Row.Cells(4).Attributes.Add("data-hide", "phone,tablet")


        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            'todo

        End If

    End Sub

    Private Sub grdHG_Sorting(sender As Object, e As GridViewSortEventArgs) Handles grdHG.Sorting
        'todo for server side sorting
    End Sub

End Class

这应该有助于故障排除。

Answer 1

我用这个解决了同样的问题。

var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
    prm.add_endRequest(function (sender, e) {
        if (sender._postBackSettings.panelsToUpdate != null) {
            $('.footable').footable();
        }

    }); 
};

Answer 2

MC9000 你的问题是你在回发后丢失了你的渲染表不是吗？

我遇到了同样的问题，并在页面底部尝试了这个：

        $('table').footable();

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () { 
            $(document).ready(function () {
              $('table').footable();
            });

我理解的问题是：回发后 JS 引用丢失了，所以你必须把它们放回去。

我希望它有帮助

Answer 3

Footable 脚本与 AJAX UpdatePanel 存在不可调和的问题，根据他们和 MS，该问题将不受支持或修复。换句话说，它们不兼容，如果不重新编写可脚注的脚本（我什至不会费心尝试编辑），就不可能有解决方法。