Question

希望有人能提供帮助，我一直在玩ASP.NET MVC 2进行学习项目。最近我想介绍一些更高级的效果，其中一个是可排序的表格。鉴于我有许多其他jquery控件，使用jquery控件似乎是个好主意！

我选择tablesorter v2并开始将其添加到我的网站。

确保我希望样式的表格有thead / tbody部分。
将.js文件添加到我的Scripts目录。
将此添加到我的部分视图<script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.4.custom.min.js") %>" type="text/javascript"></script>
（有关信息）也尝试使用“Site.Master”视图中的该条目。
在我的表格中添加了id="leagueTable"。
在部分视图中添加了<script type="text/javascript"> $(document).ready(function () { $("#leagueTable").tablesorter(); }); </script>。

在这个阶段，我运行了网站，一切都按预期工作 - 例如我可以对内容进行排序，但在视觉上没有什现在添加CSS ....

我下载了“blue.zip”并将其全部复制到/Content目录。
将以下内容添加到Site.Master的顶部，<link href="<%= Url.Content("~/Content/style.css") %>" type="text/css" rel="stylesheet" />（NB.style.css是提供的CSS的名称 - 最初我重命名了这个但是在出现问题后我减少了我的更改以保持提供）

在这个阶段，我重新确认（确保Ctrl-F5过期任何缓存）并希望看到示例中显示的花哨样式......相反，虽然仍然有效，但没有什么看起来不同。

我运行chrome（使用Inspect元素工具）并确认正在下载CSS - 正在应用jquery，因为我有排序功能正常工作 - 但它声称CSS中没有任何东西被使用（使用Audits） - “style.css：100％（估计）当前页面未使用。”）。

我到底在做什么？为什么我没有应用样式？ [20年的C ++，实时领域，但新的网络开发]

Answer 1

我个人首选的方法来仔细检查静态资源（例如CSS文件）是否正确链接是在FireFox中执行“查看源代码”。此视图超链接CSS链接，因此您可以单击它并直接查看下载的内容。

但是，既然你提到Chrome，我会这样做：

点击“控制当前页面”按钮（右上角），然后选择“开发人员” - ＆gt; “开发人员工具”
接下来，导航到head标签中的CSS源链接，然后单击CSS文件的链接，或单击顶部的“Resources”菜单选项，该选项将列出页面上的所有资源，并导航到CSS文件
它可能会告诉您此时需要启用“资源跟踪” - 如果是，请允许它。你可以
导航到“资源”页面上的CSS文件后，单击它。它将加载资源。如果它加载了预期的CSS，那么是的，它正确加载。

现在，我们假设正确加载，但您仍然遇到问题。我会尝试将自己的自定义CSS样式添加到样式表中，并查看它是否按预期更新页面。可能是简单的事情，比如

table td{ font-weight: bold; }

如果此样式生效，您就知道正在应用样式表。

如果您仍然遇到问题，可以将我们引导到该页面（如果它可以公开访问），或者准备一个示例，说明在http://jsbin.com/

等网站上无效的内容

回复更新，我会尽力解决问题。我自己使用过tablesorter，所以我很熟悉这个插件。

Answer 2

很好的解决方案，经过大量的狩猎并跟随@Matt的方向变得非常简单 - 但我已经仔细检查tablesorter documentation并发现它没有在那里提到！

当您添加网站上提供的“蓝色”或“绿色”主题时，两者都要求为表提供类名tablesorter。我错误地认为jQuery（有效）会改变表结构，添加自己的样式类，与主题中定义的样式类匹配！

所以回顾一下：

<script type="text/javascript">
    $(document).ready(function () { 
        $("#leagueTable1").tablesorter();
        $("#leagueTable2").tablesorter();
    });
</script>

<table id="leagueTable1">
    <thead>
    ...  // THIS TABLE WILL NOT BE STYLED
</table>
<table id="leagueTable2" class="tablesorter">
    <thead>
    ...  // THIS TABLE _WILL_ BE STYLED
</table>

ASP.NET MVC 2和tablesort v2 jquery控件

2 个答案: