我正在使用最新版本的Footable.js。一切工作都很好,直到我最近将jQuery从2.2.4版本更新到最新版本为止。我遇到的问题与我为自定义基础过滤构建的自定义UI有关。这是下面的代码。
似乎给我带来问题的特定代码段是:
$('#<%= ListViewContainer.ClientID%>.footable-container.list-view table').each(function () {
tables.push(FooTable.get($(this).footable()));
});
<script type="text/javascript">
jQuery(function ($) {
var tables = [];
var handleSearch = function () {
var searchQuery = $("#<%= SearchTextBox.ClientID%>").val();
$(tables).each(function () {
var table = this;
var filtering = table.use(FooTable.Filtering);
if (searchQuery === '') {
filtering.removeFilter('search');
} else {
filtering.addFilter('search', searchQuery);
}
filtering.filter();
});
}
var clearSearch = function () {
$(tables).each(function () {
var table = this;
var filtering = table.use(FooTable.Filtering);
filtering.removeFilter('search');
filtering.filter();
});
};
$('#<%= ListViewContainer.ClientID%>.footable-container.list-view table').each(function () {
tables.push(FooTable.get($(this).footable()));
});
$("tr.footable-filtering").hide();
var searchText = $("#<%= SearchText.ClientID %>");
var clearSearchText = $("#<%= ClearSearchText.ClientID %>");
clearSearchText.hide();
$("#<%= SearchButton.ClientID %>").on("click", function () {
if ($("#<%= SearchButton.ClientID %>").find(".fooicon").hasClass("fooicon-remove")) {
$("#<%= SearchTextBox.ClientID %>").val("");
$("#<%= SearchButton.ClientID %>").find(".fooicon").removeClass("fooicon-remove");
$("#<%= SearchButton.ClientID %>").find(".fooicon").addClass("fooicon-search");
clearSearchText.hide();
searchText.show();
clearSearch();
}
});
$("#<%= SearchTextBox.ClientID%>").on("keydown", function (e) {
if ($("#<%= SearchTextBox.ClientID%>").val().length >= 1) {
clearSearchText.show();
searchText.hide();
$("#<%= SearchButton.ClientID %>").find(".fooicon").addClass("fooicon-remove");
}
else {
$("#<%= SearchButton.ClientID %>").find(".fooicon").removeClass("fooicon-remove");
$("#<%= SearchButton.ClientID %>").find(".fooicon").addClass("fooicon-search");
clearSearch();
}
});
$("#<%= SearchTextBox.ClientID%>").on("keypress", function (e) {
if (e.keyCode === 13) {
e.preventDefault();
handleSearch();
} else {
if ($("#<%= SearchTextBox.ClientID%>").val() !== "") {
$("#<%= SearchButton.ClientID %>").find(".fooicon").addClass("fooicon-remove");
setTimeout(function () { handleSearch(); }, 1000);
}
else {
$("#<%= SearchButton.ClientID %>").find(".fooicon").removeClass("fooicon-remove");
$("#<%= SearchButton.ClientID %>").find(".fooicon").addClass("fooicon-search");
clearSearch();
}
}
});
// Change the empty text only on the first page load in the case that there are not any items in the table to begin with.
var emptyColumn = $('#<%= ListViewContainer.ClientID%>.footable-container.list-view tr.footable-empty td ');
var emptyText = '<%= Globalizer.GetString("MSG_NO_HANDOUTS_FOR_SET") %>';
emptyColumn.text(emptyText);
var findToggles = $('.pi_Handouts #<%= ListViewContainer.ClientID%>.footable-container.list-view .footable-toggle');
for (var i = 0; i < findToggles.length; i++) {
//Setting custom event handler for the styling to make this work on Fire Fox.
$(findToggles[i]).each(function () {
var toggleButton = $(this).closest("button");
var collapsePanel = $($(toggleButton).attr("href"));
var chevronIcon = $(this);
collapsePanel.on("show.bs.collapse", function () {
chevronIcon.switchClass('glyphicons-chevron-down', 'glyphicons-chevron-up');
});
collapsePanel.on("hide.bs.collapse", function () {
chevronIcon.switchClass('glyphicons-chevron-up', 'glyphicons-chevron-down');
});
});
}
var checkbox = $('#<%= ListViewContainer.ClientID%> .checkbox-visible');
var togglePlusIcon = $('#<%= ListViewContainer.ClientID%> .fooicon-plus');
var linkWrapper = $('#<%= ListViewContainer.ClientID%> .title-link-wrapper');
if (checkbox.length < 1) {
togglePlusIcon.addClass('float-left');
linkWrapper.addClass('float-left');
} else if (checkbox.length >= 1) {
togglePlusIcon.removeClass('float-left');
linkWrapper.removeClass('float-left');
}
var getHandoutsCheckboxes = $('.handouts-footable input[type=checkbox]');
var deleteSelectedBtn = $('#<%= DeleteSelectedHandouts.ClientID%>');
var isCheckedCounter = 0;
deleteSelectedBtn.attr('onclick', 'event.preventDefault()');
deleteSelectedBtn.css('opacity', '.5');
deleteSelectedBtn.attr('aria-label', '<%=Globalizer.GetString("TXT_DELETE_DISABLED") %>');
getHandoutsCheckboxes.on('change',
function () {
if ($(this).is(':checked')) {
isCheckedCounter++;
} else if (!$(this).is(':checked')) {
isCheckedCounter--;
}
if (isCheckedCounter === 0) {
deleteSelectedBtn.attr('onclick', 'event.preventDefault()');
deleteSelectedBtn.css('opacity', '.5');
deleteSelectedBtn.attr('aria-label', '<%=Globalizer.GetString("TXT_DELETE_DISABLED") %>');
} else {
deleteSelectedBtn.attr('onclick', 'preventDefaultEvent(event, confirm("<%=Globalizer.GetString("MSG_DELETE_CONFIRM") %>"))');
deleteSelectedBtn.css('opacity', '1');
deleteSelectedBtn.removeAttr('aria-label');
}
});
});
</script>
使用jQuery 2.2.4,$(this)将每个表注册为一个可记录区域。但是升级到最新的jQuery后,$(this)是不确定的。