jqGrid寻呼机区域 - 使用字体真棒图标

Question

我想使用Font Awesome图标:

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

在jqGrid寻呼机区域而不是默认的物理图像.

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

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

Answer 1

这是一个非常有趣的问题!我以前从未使用过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提供了解决方案.