代码之家 › 专栏 › 技术社区 › Ray Hayes

ASP.NET MVC 2和TableSort v2 jQuery控件

tablesorter asp.net-mvc-2 jquery

1

Ray Hayes · 技术社区 · 14 年前

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

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

确保我想要的样式表具有ad/t车身部分。
已将.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 目录。
将以下内容添加到网站的顶部。master, <link href="<%= Url.Content("~/Content/style.css") %>" type="text/css" rel="stylesheet" /> (NB)。style.css是所提供的css的名称-最初我将其重命名,但在出现问题后,我将更改减少为保持所提供的状态)。

在这个阶段,我重新运行(确保ctrl-f5使任何缓存过期),并希望看到示例中所示的花哨的样式…相反,虽然功能仍然正常,但没有什么不同。

我在chrome中运行(使用inspect元素工具)并确认正在下载CSS-jquery正在应用,因为我有排序功能正在工作-但它声称CSS中没有任何内容正在使用(使用审计-“style.css:100%(估计)当前页未使用。”)。

我到底做错了什么?为什么我不应用样式?[ C++ 20年,实时领域,但新的Web开发]

2 回复 | 直到 14 年前

1

Matt 14 年前

我个人的首选方法是在firefox中做一个“查看源代码”,来检查静态资源(如css文件)是否链接正确。此视图将超链接CSS链接,因此您可以单击它直接查看正在下载或未下载的内容。

不过,既然你提到Chrome,我会这样做:

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

现在,假设它是加载正确,但仍有问题。我会尝试在样式表中添加您自己的自定义CSS样式,看看它是否如您所期望的那样更新页面。可能是一些简单的事情,比如

table td{ font-weight: bold; }

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

如果你仍然有问题,你能把我们引向网页吗(如果它是公开访问的),或者准备一个例子说明什么是不工作的网站,比如 http://jsbin.com/

发回最新消息,我会试着帮你解决这个问题。我自己也用过TableSorter,所以对这个插件很熟悉。

2

0

Ray Hayes 14 年前

嗯,经过大量的狩猎和遵循@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>