部分回发后，footable脚本在updatepanel中不适用于GridView

时间：2015-03-18 23:17:30

标签： jquery twitter-bootstrap gridview updatepanel footable

我在webforms应用程序中使用footable（V2）脚本/ CSS作为ASP.Net GridView（ASP.NET 4.5）来使表响应（调整大小并隐藏不同设备的相应列）。 我想将GridView放在updatePanel中是出于明显的原因，但是，在任何部分回发中，footable脚本都不会被执行（即使我将脚本引用直接放在UpdatePanel中）。 然而，jQuery和Bootstrap脚本运行得很好（如图）。 footable_redraw 功能无论我是否使用内置的 pageLoad（）功能或 $（文档）.ready （或两个）功能。 我从MasterPage中取出了ToolkitScriptManager，但这完全没有区别。我从TKSM中删除了ScriptReferences，看看这是否会有所帮助，但它没有任何区别。我从各个论坛尝试了数百种技术，但没有答案尚未奏效（而且，可疑的是，没有人发布过完整的工作解决方案）。也许这是不可能的，但我不知道。

    <%@ 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

MasterPage：

<%@ 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代码（页眉，页脚，菜单）工作正常＆amp; jQuery在回发后工作正常，除了GridView表中的标题行（TH）之外，footable CSS主题也能正常工作。 我很难过！

此外： 这是我的新代码 - 我删除了MasterPage＆amp; 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

这应该有助于排除故障。

3 个答案:

答案 0 :(得分：2)

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

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

    }); 
};

答案 1 :(得分：1)

MC9000你的问题是你在回发后没有丢失你呈现的表格吗？

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

        $('table').footable();

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

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

我希望它有所帮助

答案 2 :(得分：0)

Footable脚本与AJAX UpdatePanel存在不可调和的问题，根据它们和MS，它们将不受支持或修复。换句话说，它们是不兼容的，如果不重写可脚脚本（我甚至不打算尝试编辑），就无法解决问题。

相关问题
最新问题