css - 无法在 jqgrid 上看到图像/图标

Question

我在我的 Asp.net MVC Web 应用程序中使用 JqGrid。

我已按照普通 MVC 应用程序的目录结构将所有 java 脚本文件放在 Scripts 文件夹下，将所有 css 和图像放在 Content 文件夹中。

但是，这里的问题是我无法在网格上看到图像。 CSS 工作正常，但用于分页、排序的图标不可见。

任何人都可以帮助我如何放置文件，以便每件事情都能完美运行..

代码:

<link href="../../Content/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/css/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>

Answer 1

我假设您以错误的方式将 jQuery UI 添加到您的元素中。您应该验证是否在 Content\css 文件夹中复制了 jQuery UI 主题的 images 子文件夹。如果你打开 jquery-ui.css 并搜索 url( text 你会看到 jquery-ui.css 使用 relative 路径来处理图像(例如 url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png))。所以你必须有包含所有 jQuery UI 图像的 images 文件夹来自使用的主题。

顺便说一句，如果您使用来自同一主题的 jquery-ui.css，则不需要包含 jquery.ui.theme.css。使用旧的 jquery-1.9.0.min.js 在我看来也不是最好的选择。您可以使用 jQuery 2.0.3(如果您需要支持 IE 6-8，则使用 1.10.3)或至少使用 jQuery 1.9.2。

我个人更喜欢使用 NuGet 将公共(public)包添加到 Visual Studio 元素中。您只需在 Visual Studio 的解决方案资源管理器中打开元素的上下文菜单，然后选择“管理 NuGet 包...”。然后你可以在线搜索公共(public)包，如 jQuery、jQuery.UI.Combined、jQuery.UI.Theme.Redmond、Trirand .jqGrid 等等。 NuGet 会将所有文件安装到元素的相应文件夹中。文件夹位置由包的开发人员选择。即使您手动安装一些文件，我也建议您使用所有文件的相同位置，就像 NuGet 包使用的位置一样。