9

我想使用 Font Awesome 图标：

<i class="icon-edit"></i>

默认情况下在 jqGrid 分页器区域而不是物理图像中。

.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } })

有谁知道如何实现这一目标？

在此处输入图像描述

4

4 回答 4

16

这是一个非常有趣的问题！我以前从未使用过Font Awesome 图标，但这似乎是一个非常有趣的项目。

jqGrid 目前没有对 Font Awesome 图标的直接支持，但我准备了一个简单的演示，展示了如何用 Font Awesome 中的相应图标替换标准的 jQuery UI 导航器图标。

缩放页面后，可以看到与原始导航器图标的主要区别。我在以 400% 缩放显示的导航器下方包括：

使用 jQuery UI 图标的原始导航器

在此处输入图像描述

带有 Font Awesome 图标的导航器：

在此处输入图像描述

我使用的代码非常简单。而不是使用

$grid.jqGrid("navGrid", "#pager", {view: true});

我用了

$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
    addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
    refreshicon: "icon-refresh", viewicon: "icon-file",view: true});

$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");

我添加了 CSS

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }

我认为可以将更多的 jQuery UI 图标替换为 Font Awesome 图标，但这并不是很简单。我会更多地考虑这个问题，并会联系 jqGrid 的开发者（Tony Tomov）考虑让 jqGrid 对 Font Awesome 图标更友好，这样就可以非常简单地切换到 Font Awesome 图标。

更新：我添加了允许顶部替换寻呼机中更多图标的代码：

var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
    .removeClass("ui-icon ui-icon-seek-first")
    .addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
    .removeClass("ui-icon ui-icon-seek-prev")
    .addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
    .removeClass("ui-icon ui-icon-seek-next")
    .addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
    .removeClass("ui-icon ui-icon-seek-end")
    .addClass("icon-step-forward");

结果得到以下寻呼机：

在此处输入图像描述

代替

在此处输入图像描述

更新 2：更改最小化图标的代码看起来更完整。最初应该首先更改图标

$grid.closest(".ui-jqgrid")
    .find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
    .removeClass("ui-icon ui-icon-circle-triangle-n")
    .addClass("icon-circle-arrow-down");

然后在每次单击图标后更改它：

onHeaderClick: function (gridstate) {
    if (gridstate === "visible") {
        $(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
            .removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
            .addClass("icon-circle-arrow-down");
    } else if (gridstate === "hidden") {
        $(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
            .removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
            .addClass("icon-circle-arrow-up");
    }
}

另外一个需要添加CSS

.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }

为了修复排序图标，我使用了代码

var $sortables = $grid.closest(".ui-jqgrid")
    .find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
    .removeClass("ui-icon ui-icon-triangle-1-s")
    .addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
    .removeClass("ui-icon ui-icon-triangle-1-n")
    .addClass("icon-sort-up");

和 CSS

.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
    height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }

结果将得到以下结果：

在此处输入图像描述

更新 3：在下一个演示中，可以找到更完整的 jQuery UI 图标替换为 Font Awesome 图标。

更新 4：答案为 Font Awesome 版本 4.x 提供了解决方案。

于 2012-12-13T17:46:57.487 回答
2

想我会为那些感兴趣的人提供一个 CSS 替代答案。我们的一位开发人员实现了一个 JS 选项，该选项在功能上确实有效，但是，在正确呈现之前存在延迟（不理想）。

我们在分页选项中使用了很棒的字体图标，下面是我们如何实现它。

找到 jqGrid 用于我们希望自定义的分页图标的四个类，并创建以下 css 以应用基本字体真棒样式

.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

}

然后，只需content从 font-family 图标中获取并将它们用作您自己的图标即可。

.ui-icon-seek-next:before
{
    content: "\f105";
}
.ui-icon-seek-prev:before
{
    content: "\f104";
}
.ui-icon-seek-end:before
{
    content: "\f101";
}
.ui-icon-seek-first:before
{
    content: "\f100";
}

所以整个 CSS 看起来像这样

.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

}
.ui-icon-seek-next:before
{
    content: "\f105";
}
.ui-icon-seek-prev:before
{
    content: "\f104";
}
.ui-icon-seek-end:before
{
    content: "\f101";
}
.ui-icon-seek-first:before
{
    content: "\f100";
}

并且我们的网格上的输出没有 JS 并且没有延迟 在此处输入图像描述

于 2014-08-01T17:35:46.477 回答
1

通过查看上面 Oleg 的答案，我做了以下事情来简化事情。 附加 CSS

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}

** padding-left:2px;padding-right:2px; 是可选的，这仅适用于没有标题的图标...

然后开始在 navButtonAdd 中添加 fontawesome 图标

caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"

等等 .. 你也可以使用来自 font-awesome 的所有额外功能，比如 icon-rotate-XX。这样我就不必从跨度中删除 ui-icon 类。

于 2013-10-03T05:56:27.630 回答
-1

受@afreeland 答案的启发，我在 github 上创建了一个可用的 css，它允许您将图标转换为 Font-Awesome 图标。

在我看来，与@Oleg 描述的 jquery 方法相比，它的性能优势很重要。在我看来，这也是一个非常优雅的解决方案。

欢迎您使用它：https ://github.com/guylando/ToAF

注意：您必须将此 ToAF.css 文件样式优先于其他图标样式，以便例如通过将 css 内容复制到文档中的标签中来实现。

于 2015-09-28T20:30:35.393 回答