我有一个带有复选框的过滤器菜单,用于过滤使用slideToggle()打开和关闭的特定类别,并且在页面刷新或初始加载时,它可以正常工作,但如果您对其下面的结果进行分页,则打开/关闭过滤器按钮不起作用。这是包含listview和datapager的ASP:Panel:
<asp:Panel ID="PanelMyRecipes" CssClass="wrap" runat="server">
<asp:LinqDataSource ID="ldsRecipes" runat="server" OnSelecting="ldsRecipes_Selecting">
</asp:LinqDataSource>
<asp:ListView ID="lvMyRecipes" runat="server" DataSourceID="ldsRecipes" >
<EmptyDataTemplate>
<p class="empty">There are currently no recipes that meet your search criteria.</p>
</EmptyDataTemplate>
<LayoutTemplate>
<table>
<tr>
<th class="first header-column-1">
<ep:ColumnHeader ID="chBrand" runat="server" Text="Brand" Type="SORTABLE" CommandArgument="BrandName" />
</th>
<th class="header-column-2">
<ep:ColumnHeader ID="chRecipeName" runat="server" Text="Recipe Name" Type="SORTABLE" CommandArgument="RecipeName" />
</th>
<th class="header-column-3">
<ep:ColumnHeader ID="chStatus" runat="server" Text="Status" Type="SORTABLE" CommandArgument="CurrentStatusName" />
</th>
<th class="header-column-4">
<ep:ColumnHeader ID="chActions" runat="server" Text="Actions" />
</th>
<th class="header-column-5">
<ep:ColumnHeader ID="chTasks" runat="server" Text="Tasks" />
</th>
<th class="header-column-6">
<ep:ColumnHeader ID="chVersion" runat="server" Text="Version" Type="SORTABLE" CommandArgument="Version" />
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<asp:PlaceHolder runat="server" ID="phRow">
<tr <%# (Container.DataItemIndex % 2 != 0) ? "class=\"alt\"" : "" %>>
<td class="column-1">
<%# Eval("BrandName") %>
</td>
<td class="column-2">
<a href='<%# Eval("RecipeLink") %>'><%# Eval("RecipeName") %></a>
</td>
<td class="column-3">
<ep:RecipeStatusMenu ID="rsmStatus" runat="server" Text='<%# Eval("CurrentStatusName") %>' ThisRecipeId='<%# Eval("RecipeID") %>' />
</td>
<td class="column-4">
<asp:Label ID="lRecipeActionsTarget" runat="server" Text="Choose" SkinID="DropDownExtender" />
<asp:Panel ID="pRecipeActionsDropDown" runat="server" SkinID="DropDownExtender">
<ep:RecipeActions ID="cRecipeActions" runat="server" RecipeLink='<%# Eval("RecipeLink") %>' ThisRecipeId='<%# Eval("RecipeID") %>'></ep:RecipeActions>
</asp:Panel>
<asp:DropDownExtender ID="ddeRecipeActions" runat="server" TargetControlID="lRecipeActionsTarget"
DropDownControlID="pRecipeActionsDropDown" />
</td>
<td class="column-5">
<asp:LinkButton ID="lbRecipeTasks" runat="server" CssClass="tasks-button" Text="Tasks" CommandArgument='<%# Eval("RecipeID") %>' OnClick="lbRecipeTasks_Click" />
</td>
<td class="column-6">
<%# Eval("Version") %>
<asp:Panel ID="pConsumerOperator" runat="server" SkinID="ModalConsumerOperatorResearch">
<h3><asp:Label ID="Label3" runat="server" Text="Consumer/Operator Research" /><asp:HyperLink ID="hlClose" runat="server" SkinID="ModalCloseButton" /></h3>
<div class="research-content-wrap">
<asp:TabContainer ID="tcConsumerOperator" runat="server">
<asp:TabPanel ID="tpComments" runat="server" HeaderText="Comments">
<HeaderTemplate>
<asp:Label ID="Label9" runat="server" Text="Comments" />
</HeaderTemplate>
<ContentTemplate>
<ep:SectionHeader ID="SectionHeader1" runat="server" SectionTitle="Enter Your General Comments" />
<table class="form">
<tr>
<td>
<asp:TextBox ID="tbComments" runat="server" TextMode="MultiLine" Width="700" Height="150" />
</td>
</tr>
</table>
<div class="button-container">
<ep:ActionButton ID="abSubmitComments" runat="server" Text="Submit" Type="ARROW" CommandArgument='<%# Eval("RecipeID") %>' OnClick="abSubmitComments_Click" />
</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tpDocuments" runat="server" HeaderText="Documents">
<HeaderTemplate>
<asp:Label ID="Label1" runat="server" SkinID="TabSeparator"><asp:Label ID="Label2" runat="server" Text="Documents" /></asp:Label>
</HeaderTemplate>
<ContentTemplate>
<ep:SectionHeader ID="SectionHeader2" runat="server" SectionTitle="Documents" />
<table class="form">
<tr>
<td>
<asp:FileUpload ID="fuConsumerOpDocument" runat="server" />
<ep:ActionButton ID="abUpload" runat="server" Text="Upload" Type="ADD" CommandArgument='<%# Eval("RecipeID") %>' OnClick="abUpload_Click" />
</td>
</tr>
</table>
<asp:LinqDataSource ID="ldsDocuments" runat="server" ContextTypeName="EpicPepper.Data.DataContext" TableName="RecipeDocuments"
Where="DocumentTypeID == 4 && RecipeID == @RecipeID && DisplayName != String.Empty">
<WhereParameters><asp:ControlParameter ControlID="abUpload" PropertyName="CommandArgument" Name="RecipeID" DbType="Int32" /></WhereParameters>
</asp:LinqDataSource>
<asp:ListView ID="lvDocuments" runat="server">
<LayoutTemplate>
<table class="listings">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr <%# (Container.DataItemIndex == 0) ? "class=\"first\"" : "" %>>
<td>
<asp:HyperLink ID="hlDocument" runat="server" Text='<%# Eval("DisplayName") %>' NavigateUrl='<%# EpicPepper.ContentHandler.Content.GetDocumentUrl((Guid)Eval("Guid")) %>' Target="_blank" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</asp:Panel>
<asp:ModalPopupExtender ID="mpeConsumerOperator" runat="server"
TargetControlID="btnHidden"
PopupControlID="pConsumerOperator"
CancelControlID="hlClose" />
<asp:Button runat="server" ID="btnHidden" style="display:none" />
</td>
</tr>
</asp:PlaceHolder>
</ItemTemplate>
</asp:ListView>
<div class="pager">
<asp:DataPager ID="dpRecipes" runat="server" PageSize="10" PagedControlID="lvMyRecipes" Visible="false">
<Fields>
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" ShowNextPageButton="false" ButtonCssClass="button previous first" FirstPageText="First" />
<asp:NextPreviousPagerField ButtonType="Link" ButtonCssClass="button previous" PreviousPageText="Previous" ShowNextPageButton="false" />
<asp:NumericPagerField ButtonType="Link" ButtonCount="3" />
<asp:NextPreviousPagerField ButtonType="Link" ButtonCssClass="button next" NextPageText="Next" ShowPreviousPageButton="false" />
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowLastPageButton="true" ShowPreviousPageButton="false" ShowNextPageButton="false" ButtonCssClass="button next last" LastPageText="Last" />
</Fields>
</asp:DataPager>
</div>
<div class="spacer"></div>
</asp:Panel>
那么在分页上打破的javascript是在main.js文件中,看起来像这样:
$(function () {
$(".filter-icon").click(function () {
$(".status-panel").slideToggle();
});
$(".filter-text").click(function () {
$(".status-panel").slideToggle();
});
$("ul.toolsMenu li:nth-child(2n + 0)").addClass("lighterDarkGrey");
$("#dashboard #main table tr:even td:nth-child(1n)").addClass("alt-column-1");
$("#dashboard #main table tr:even td:nth-child(2n)").addClass("alt-column-2");
$("#dashboard #main table tr:even td:nth-child(3n)").addClass("alt-column-3");
$("#dashboard #main table tr:even td:nth-child(4n)").addClass("alt-column-4");
$("#dashboard #main table tr:even td:nth-child(5n)").addClass("alt-column-5");
$("#dashboard #main table tr:even td:nth-child(6n)").addClass("alt-column-6");
});
答案 0 :(得分:0)
固定!
作为参考,我使用的答案在这里: Jquery code doesn't work after paging?
在我的情况下,以下工作:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(filterFix);
filterFix();
});
function filterFix() {
$(".filter-icon").click(function () {
$(".status-panel").slideToggle();
});
$(".filter-text").click(function () {
$(".status-panel").slideToggle();
});
$("ul.toolsMenu li:nth-child(2n + 0)").addClass("lighterDarkGrey");
$("#dashboard #main table tr:even td:nth-child(1n)").addClass("alt-column-1");
$("#dashboard #main table tr:even td:nth-child(2n)").addClass("alt-column-2");
$("#dashboard #main table tr:even td:nth-child(3n)").addClass("alt-column-3");
$("#dashboard #main table tr:even td:nth-child(4n)").addClass("alt-column-4");
$("#dashboard #main table tr:even td:nth-child(5n)").addClass("alt-column-5");
$("#dashboard #main table tr:even td:nth-child(6n)").addClass("alt-column-6");
};
这是重要的部分:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(filterFix);
您显然可以更改函数名称和内容,只需确保将函数传递给add_endRequest()方法即可。
全部谢谢!