我有一个jQuery-UI，它应该用作表列标题上的过滤器。当我将实现编写为单独的html文件时，它工作得很好。
这是与所有包含的脚本标记一起使用的文件。在这里，下面的ColumnFilters.js是整个过滤器框（一个对话框）的实现。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script src="Scripts/jquery-ui.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<style>
span i.glyphicon.glyphicon-filter {
visibility: hidden;
}
span:hover i.glyphicon.glyphicon-filter {
visibility: visible !important;
}
</style>
<script src="ColumnFilters.js"></script>
<form id="dialog" style="background-color:gainsboro" class="table-bordered">
<select id="filterclause">
<option selected>Equals</option>
<option>Contains</option>
<option>Does not Contain</option>
<option>Not Equal to</option>
</select>
<div>
<label for="FirstBox">Field 1</label>
<input id="FirstBox" />
</div>
<!--<button type="submit" class="btn btn-primary">Submit</button>-->
<div>
<button class="btn btn-primary" id="ApplyFilter">Apply Filter</button>
<button class="btn btn-primary" id="ClearFilter">Clear Filter</button>
</div>
</form>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table table-bordered" id="AddressTable">
<thead>
<tr>
<th data-filterclause="" data-filtervalue=""><span>Firstname</span>
<span style="float:right"><i class="glyphicon glyphicon-filter"></i></span>
<!--<span><i class="material-icons">filter_list</i></span>-->
</th>
<th data-filterclause="" data-filtervalue=""><span>Lastname</span>
<span style="float:right"><i class="glyphicon glyphicon-filter"></i></span>
</th>
<th data-filterclause="" data-filtervalue="">
<span>Email</span>
<span style="float:right"><i class="glyphicon glyphicon-filter"></i></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
但是当我尝试将相同的实现集成到通过MVC框架创建的表中时，它不起作用。以下是MVC页面的页面源-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shared - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/wait.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery-ui.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
<li><a href="/Products">Products</a>/li>
<li><a href="/Customers">Customers</a>/li>
<li><a href="/Addresses/Shared">Addresses</a>/li>
<li><a href="/ProductModels">ProductModels</a>/li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<script>
var filterindex = 0;
$(document).ready(function ()
{
$("#dialog").dialog({
autoOpen: false,
closeOnEscape: true,
draggable: true,
title: "Filter Box"
});
$(".glyphicon .glyphicon-filter").click(function (e) {
filterindex = $(event.target).closest('th').index();
$("#dialog #filterclause").val($("th:eq(" + filterindex + ")").data("filterclause"));
$("#dialog #FirstBox").val($("th:eq(" + filterindex + ")").data("filtervalue"));
$("#dialog").dialog({
position: { at: "right bottom", my: "left top", of: $(e.target) }
});
$("#dialog").dialog("open");
});
$("#close").click(function () {
$("#dialog").dialog("close");
});
$("#ApplyFilter").click(function (e) {
e.preventDefault();
$("th:eq(" + filterindex + ")").data("filterclause", $("#filterclause").find("option:selected").text());
$("th:eq(" + filterindex + ")").data("filtervalue", $("#FirstBox").val());
FilterAddressTable();
});
function FilterAddressTable() {
$("#AddressTable tr").each(function () {
$(this).show();
});
$("#AddressTable th").each(function () {
var headerindex = $(this).index();
$(this).closest("table").find("tr:has(td):visible").each(function () {
if (!$("th:eq(" + headerindex + ")").data("filtervalue")) {
$("th:eq(" + headerindex + ")").find("span:has(i.glyphicon.glyphicon-filter)").find("i.glyphicon.glyphicon-filter").css("visibility", "hidden");
}
else {
$("th:eq(" + headerindex + ")").find("span:has(i.glyphicon.glyphicon-filter)").find("i.glyphicon.glyphicon-filter").css("visibility", "visible");
switch ($("th:eq(" + headerindex + ")").data("filterclause")) {
case "Equals":
if ($(this).find("td:eq(" + headerindex + ")").text() === $("th:eq(" + headerindex + ")").data("filtervalue")) {
$(this).show();
}
else {
$(this).hide();
}
break;
case "Contains":
if ($(this).find("td:eq(" + headerindex + ")").is(":contains(" + $("th:eq(" + headerindex + ")").data("filtervalue") + ")")) {
$(this).show();
}
else {
$(this).hide();
} break;
case "Does not Contain":
if ($(this).find("td:eq(" + headerindex + ")").is(":not(:contains(" + $("th:eq(" + headerindex + ")").data("filtervalue") + "))")) {
$(this).show();
}
else {
$(this).hide();
} break;
case "Not Equal to": if ($(this).find("td:eq(" + headerindex + ")").text() != $("th:eq(" + headerindex + ")").data("filtervalue")) {
$(this).show();
}
else {
$(this).hide();
}
break;
}
}
});
});
}
$("#ClearFilter").click(function (e) {
e.preventDefault();
$("th:eq(" + filterindex + ")").data("filterclause", "");
$("th:eq(" + filterindex + ")").data("filtervalue", "");
FilterAddressTable();
});
var Options =
{
url: "/Addresses/" + "Index",
type: "GET"
};
$.ajax(Options).done(function(data)
{
$("#DynamicView").html(data);
});
$(document).ajaxStart(function () {
$("#ProductsTable").css('visibility', 'hidden');
$(".signal").css('visibility', 'visible');
});
$(document).ajaxComplete(function () {
$("#ProductsTable").css('visibility', 'visible');
$(".signal").css('visibility', 'hidden');
});
});
</script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
span i.glyphicon.glyphicon-filter {
visibility: hidden;
}
span:hover i.glyphicon.glyphicon-filter {
visibility: visible !important;
}
</style>
<div class="signal"></div>
<form id="dialog" style="background-color:gainsboro" class="table-bordered">
<select id="filterclause">
<option selected>Equals</option>
<option>Contains</option>
<option>Does not Contain</option>
<option>Not Equal to</option>
</select>
<div>
<label for="FirstBox">Field 1</label>
<input id="FirstBox" />
</div>
<!--<button type="submit" class="btn btn-primary">Submit</button>-->
<div>
<button class="btn btn-primary" id="ApplyFilter">Apply Filter</button>
<button class="btn btn-primary" id="ClearFilter">Clear Filter</button>
</div>
</form>
<div id="DynamicView">
</div>
<hr />
<footer>
<p>© 2019 - My ASP.NET Application</p>
</footer>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"d5fb4162ac90439bb233266c5228c43c"}
</script>
<script type="text/javascript" src="http://localhost:3085/335000e36b2e4c7aa1efbc045945ee81/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
在此页面中，该表不可见，因为我正在从另一个html加载表主体。但是，标记为id=dialog的部分应该作为对话框工作，并且当我单击表格标题上的图标时应该打开-这就是我在过滤器图标的click事件中对其进行配置的方式。它没有打开，我尝试了所有操作，从将ColumnFilters.js代码放入正文到将所有脚本引用放入正文中，这些似乎都不起作用。
答案 0 :(得分：0)
这里要看的一件事：
$(".glyphicon .glyphicon-filter").click(function(e) {
filterindex = $(event.target).closest('th').index();
$("#dialog #filterclause").val($("th:eq(" + filterindex + ")").data("filterclause"));
$("#dialog #FirstBox").val($("th:eq(" + filterindex + ")").data("filtervalue"));
$("#dialog").dialog({
position: {
at: "right bottom",
my: "left top",
of: $(e.target)
}
});
$("#dialog").dialog("open");
});
click回调正在传递e，但您调用了不存在的event.target。这应该会导致以下错误：
Uncaught TypeError: Cannot read property 'type' of undefined
at e.setFieldValue
at HTMLFormElement.formKeydownListener
首先需要解决这个问题，以确保这不是该功能的停止器。
第二，项目$(".glyphicon .glyphicon-filter")似乎不存在。我看不到包含.glyphicon作为子元素的.glyphicon-filter元素。我确实看到了$(".glyphicon.glyphicon-filter")，但这似乎正常工作。
这是我的测试代码：https://jsfiddle.net/Twisty/oLh5wf2z/9/
JavaScript
var filterindex = 0;
$(function() {
$("#dialog").dialog({
autoOpen: false,
closeOnEscape: true,
draggable: true,
title: "Filter Box"
});
$(".glyphicon.glyphicon-filter").click(function(e) {
filterindex = $(e.target).closest('th').index();
$("#dialog #filterclause").val($("th:eq(" + filterindex + ")").data("filterclause"));
$("#dialog #FirstBox").val($("th:eq(" + filterindex + ")").data("filtervalue"));
$("#dialog").dialog({
position: {
at: "right bottom",
my: "left top",
of: $(e.target)
}
});
$("#dialog").dialog("open");
});
$("#close").click(function() {
$("#dialog").dialog("close");
});
$("#ApplyFilter").click(function(e) {
e.preventDefault();
$("th:eq(" + filterindex + ")").data("filterclause", $("#filterclause").find("option:selected").text());
$("th:eq(" + filterindex + ")").data("filtervalue", $("#FirstBox").val());
FilterAddressTable();
});
function FilterAddressTable() {
$("#AddressTable tr").each(function() {
$(this).show();
});
$("#AddressTable th").each(function() {
var headerindex = $(this).index();
$(this).closest("table").find("tr:has(td):visible").each(function() {
if (!$("th:eq(" + headerindex + ")").data("filtervalue")) {
$("th:eq(" + headerindex + ")").find("span:has(i.glyphicon.glyphicon-filter)").find("i.glyphicon.glyphicon-filter").css("visibility", "hidden");
} else {
$("th:eq(" + headerindex + ")").find("span:has(i.glyphicon.glyphicon-filter)").find("i.glyphicon.glyphicon-filter").css("visibility", "visible");
switch ($("th:eq(" + headerindex + ")").data("filterclause")) {
case "Equals":
if ($(this).find("td:eq(" + headerindex + ")").text() === $("th:eq(" + headerindex + ")").data("filtervalue")) {
$(this).show();
} else {
$(this).hide();
}
break;
case "Contains":
if ($(this).find("td:eq(" + headerindex + ")").is(":contains(" + $("th:eq(" + headerindex + ")").data("filtervalue") + ")")) {
$(this).show();
} else {
$(this).hide();
}
break;
case "Does not Contain":
if ($(this).find("td:eq(" + headerindex + ")").is(":not(:contains(" + $("th:eq(" + headerindex + ")").data("filtervalue") + "))")) {
$(this).show();
} else {
$(this).hide();
}
break;
case "Not Equal to":
if ($(this).find("td:eq(" + headerindex + ")").text() != $("th:eq(" + headerindex + ")").data("filtervalue")) {
$(this).show();
} else {
$(this).hide();
}
break;
}
}
});
});
}
$("#ClearFilter").click(function(e) {
e.preventDefault();
$("th:eq(" + filterindex + ")").data("filterclause", "");
$("th:eq(" + filterindex + ")").data("filtervalue", "");
FilterAddressTable();
});
var Options = {
url: "/Addresses/" + "Index",
type: "GET"
};
$.ajax(Options).done(function(data) {
$("#DynamicView").html(data);
});
$(document).ajaxStart(function() {
$("#ProductsTable").css('visibility', 'hidden');
$(".signal").css('visibility', 'visible');
});
$(document).ajaxComplete(function() {
$("#ProductsTable").css('visibility', 'visible');
$(".signal").css('visibility', 'hidden');
});
});
更新
请查看：https://www.w3schools.com/cssref/css_selectors.asp
jQuery和CSS，使用选择器来帮助识别对象。
.class1.class2选择在其class属性中同时设置了name1和name2的所有元素
.class1 .class2选择名称为name1的元素的后代的所有名称为name2的元素 希望有帮助。
element>element选择所有元素，其中父元素是元素
希望有帮助。