jqGrid：字体真棒图标

Question

我正在尝试使用 Font Awesome 图标代替 jqGrid 中工具栏的 jqueryUI 图标（添加、编辑、删除、查看图标）。

This 演示正是我想要完成的。我已经阅读了 Oleg 的 answer，它演示了删除图标类并在其位置添加了 Font Awesome 图标。但是当我尝试这样做时，什么都没有改变。我相信我可能引用了错误的图标。

我下载了 Font Awesome 4.0.3 和 jqGrid 4.5.4--在 FA 文件树的 _icons.scss 文件中，图标的引用如下：

.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }

但在 Oleg 建议的代码中，新图标被标记为“icon-pencil”：

$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");

这是我的代码：我只为这个例子做了编辑图标。我还为图标使用了新标签“fa-pencil”。

jQuery("#grid").jqGrid('navGrid','#grid_toppager"', {editicon: "fa-pencil", edit:true});

$('#grid_toppager .navtable .ui-pg-div>span').removeClass('ui-icon'); 

我需要什么样的代码组合才能用 Font Awesome 图标替换 ui-icons？

任何有用的提示将不胜感激，谢谢

Answer 1

我同意 my old answer 不能与 Font Awesome 4 一起使用，因为在版本 4 中更改了类的名称。我自己在为客户开发的解决方案中使用 Font Awesome 4，我决定分享它与其他人。

文件jQuery.jqGrid.fontAwesome4.css、jQuery.jqGrid.fontAwesome4.js 和jQuery.jqGrid.checkboxFontAwesome4.js 包含新的jqGrid 方法initFontAwesome 和formatter: "checkboxFontAwesome4"。 The demo 演示文件的用法：

建议方法initFontAwesome的用法很简单。首先需要包含额外的 CSS 和 JavaScript 文件：

<link rel="stylesheet" type="text/css"
      href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
...
<link rel="stylesheet" type="text/css" href=".../ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href=".../jQuery.jqGrid.fontAwesome4.css" />
...
<script type="text/javascript" src=".../i18n/grid.locale-en.js"></script>
<script type="text/javascript" src=".../jquery.jqGrid.min.js"></script>
<script type="text/javascript" src=".../jQuery.jqGrid.fontAwesome4.js"></script>

然后修改众所周知的行

$("#grid").jqGrid({
    ... // jqGrid options and callbacks
});

到

$("#grid").jqGrid("initFontAwesome").jqGrid({
    ... // jqGrid options and callbacks
});

要使用formatter: "checkboxFontAwesome4" 而不是predefined formatter formatter: "checkbox" 只需在jquery.jqGrid.min.js（或jquery.jqGrid.src.js）之后包含jQuery.jqGrid.checkboxFontAwesome4.js：

<script type="text/javascript"
        src=".../jQuery.jqGrid.checkboxFontAwesome4.js"></script>

格式化程序“checkboxFontAwesome4”对formatter: "checkbox"有一些优势：

• 可以通过单击图标来选择行。标准formatter: "checkbox" 使用禁用的<input type="checkbox">。大多数网络浏览器都会阻止单击禁用的控件。我在“clickableCheckbox”之前发布过（见here 和here）。
• 我使用树复选框格式化程序对具有许多行和列的网格进行的测试表明，格式化程序“checkboxFontAwesome4”的渲染速度最快（在我测试过的所有 Web 浏览器中），formatter: "checkbox" 较低并且“ clickableCheckbox" 是最慢的。所以formatter "checkboxFontAwesome4" 不仅很酷，而且渲染速度非常快。

最后我包括jQuery.jqGrid.fontAwesome4.css、jQuery.jqGrid.fontAwesome4.js和jQuery.jqGrid.checkboxFontAwesome4.js的当前状态：

jQuery.jqGrid.fontAwesome4.css:

.ui-jqgrid .ui-pg-table .ui-pg-div>span.fa, #jqContextMenu .ui-menu-item>a>span.fa {
    text-indent:0;
    height: auto;
    width: auto;
    background-image: none;
    overflow: visible;
    padding-top: 1px;
}
.ui-jqgrid .ui-pg-table .ui-pg-div {
    text-indent:0;
    height: auto;
    width: auto;
    background-image: none;
    overflow: visible;
    padding-top: 1px;
}

.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title span { font-size: 18px; display: inline-block; }
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title { margin-top: 0; top: 0; padding-left: 2px; padding-bottom: 2px;}
.ui-jqgrid .ui-icon-asc.fa { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc.fa, .ui-jqgrid .ui-icon-desc.fa {
    height: auto; margin-top: 2px; margin-left: 2px;
}
.ui-jqgrid .s-ico>.ui-state-disabled.fa, .s-ico>.ui-state-disabled.fa { padding: 0; }

.ui-jqdialog .ui-jqdialog-titlebar-close { text-decoration: none; right: 0.2em !important}
.ui-jqdialog .ui-jqdialog-titlebar-close>span { margin-top: 3px; margin-left: 5px;}
.ui-jqdialog .EditTable .fm-button-icon-right { padding-left: 0; padding-right: 0.5em; float:right;}
.ui-jqdialog .EditTable .fm-button-icon-left { padding-left: 0; float:left; }
.ui-jqdialog .EditButton>.fm-button { display: block; width: auto; }
.ui-jqdialog .EditButton>.fm-button>span { float: left; margin-left: 0.5em; margin-right: 0;}
.ui-jqgrid .ui-jqdialog .fm-button>span { margin-left: 0.5em; margin-right: 0; }
.ui-jqdialog>.ui-resizable-se { bottom: -3px; right: -3px}

jQuery.jqGrid.fontAwesome4.js:

/*global $ */
(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.jgrid, {
        icons: {
            common: "fa", // will be implemented later
            scale: "", // will be implemented later. For example as "fa-lg"
            titleVisibleGrid: "fa fa-arrow-circle-up",
            titleHiddenGrid: "fa fa-arrow-circle-down",
            titleIcon: "ui-corner-all fa-title",
            close: "fa fa-times",
            edit: "fa fa-pencil fa-fw",
            add: "fa fa-plus fa-fw",
            del: "fa fa-trash-o fa-fw",
            search: "fa fa-search fa-fw",
            refresh: "fa fa-refresh fa-fw",
            view: "fa fa-file-o fa-fw",
            pager: {
                first: "fa fa-step-backward fa-fw",
                prev: "fa fa-backward fa-fw",
                next: "fa fa-forward fa-fw",
                last: "fa fa-step-forward fa-fw"
            },
            form: {
                prev: "fa fa-caret-left",
                next: "fa fa-caret-right",
                save: "fa fa-floppy-o",
                undo: "fa fa-undo",
                close: "fa fa-times",
                delete: "fa fa-trash-o"
            },
            searchForm: {
                reset: "fa fa-undo",
                query: "fa fa-comments-o",
                search: "fa fa-search"
            }
        }
    });

    $.extend($.jgrid.nav, {
        editicon: $.jgrid.icons.edit,
        addicon: $.jgrid.icons.add,
        delicon: $.jgrid.icons.del,
        searchicon: $.jgrid.icons.search,
        refreshicon: $.jgrid.icons.refresh,
        viewicon: $.jgrid.icons.view
    });

    $.extend($.jgrid.defaults, {
        fontAwesomeIcons: true // the new option will be used in callbacks
    });

    $.extend($.jgrid, {
        originalCreateModal: $.jgrid.originalCreateModal || $.jgrid.createModal,
        createModal: function (aIDs, content, p, insertSelector, posSelector, appendsel, css) {
            $.jgrid.originalCreateModal.call(this, aIDs, content, p, insertSelector, posSelector, appendsel, css);
            if ($(insertSelector).find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable").jqGrid("getGridParam", "fontAwesomeIcons")) {
                $("#" + $.jgrid.jqID(aIDs.modalhead) + ">a.ui-jqdialog-titlebar-close>span.ui-icon")
                    .removeClass("ui-icon ui-icon-closethick")
                    .addClass($.jgrid.icons.close);
                $("#" + $.jgrid.jqID(aIDs.themodal) + ">div.jqResize").removeClass("ui-icon-grip-diagonal-se");
            }
        }
    });

    $.extend($.jgrid.view, {
        beforeShowForm: function ($form) {
            var $dialog = $form.closest(".ui-jqdialog"),
                $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
            $iconSpans.each(function () {
                var $this = $(this), $fmButton = $this.parent();
                if ($this.hasClass("ui-icon-triangle-1-w")) {
                    $this.removeClass("ui-icon ui-icon-triangle-1-w")
                        .addClass($.jgrid.icons.form.prev);
                } else if ($this.hasClass("ui-icon-triangle-1-e")) {
                    $this.removeClass("ui-icon ui-icon-triangle-1-e")
                        .addClass($.jgrid.icons.form.next);
                } else if ($this.hasClass("ui-icon-close")) {
                    $fmButton.removeClass("fm-button-icon-left")
                        .addClass("fm-button-icon-right")
                        .html("<span class=\"" + $.jgrid.icons.form.close + "\"></span><span>" + $fmButton.text() + "</span>");
                }

            });
        }
    });

    $.extend($.jgrid.del, {
        afterShowForm: function ($form) {
            var $dialog = $form.closest(".ui-jqdialog"),
                $tdButtons = $dialog.find(".EditTable .DelButton"),
                $fmButtonNew = $("<td class=\"DelButton EditButton\" style=\"float: right;\">"),
                $iconSpans = $tdButtons.find(">a.fm-button>span.ui-icon");

            $tdButtons.css("float", "right");
            $iconSpans.each(function () {
                var $this = $(this), $fmButton = $this.parent();
                if ($this.hasClass("ui-icon-scissors")) {
                    $fmButton.html("<span class=\"" + $.jgrid.icons.form.delete + "\"></span><span>" + $fmButton.text() + "</span>");
                    $fmButtonNew.append($fmButton);
                } else if ($this.hasClass("ui-icon-cancel")) {
                    $fmButton.html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
                    $fmButtonNew.append($fmButton);
                }
            });
            if ($fmButtonNew.children().length > 0) {
                // remove &nbsp; between buttons
                $tdButtons.replaceWith($fmButtonNew);
            }
        }
    });

    $.jgrid.extend({
        initFontAwesome: function () {
            return this.each(function () {
                var $grid = $(this);
                $grid.bind("jqGridFilterAfterShow", function (e, $form) {
                    // an alternative to afterShowSearch
                    var $dialog = $form.closest(".ui-jqdialog"),
                        $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
                    $iconSpans.each(function () {
                        var $this = $(this), $fmButton = $this.parent();
                        $this.removeClass("ui-icon");
                        if ($this.hasClass("ui-icon-search")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.search + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-arrowreturnthick-1-w")) {
                            $this.closest(".EditButton").css("float", "left");
                            $fmButton.addClass("fm-button-icon-left")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.reset + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-comment")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.query + "\"></span><span>" + $fmButton.text() + "</span>");
                        }
                    });
                }).bind("jqGridAddEditBeforeShowForm", function (e, $form) {
                    // alternative to beforeShowForm callback
                    var $dialog = $form.closest(".ui-jqdialog"),
                        $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
                    $iconSpans.each(function () {
                        var $this = $(this), $fmButton = $this.parent();
                        if ($this.hasClass("ui-icon-triangle-1-w")) {
                            $this.removeClass("ui-icon ui-icon-triangle-1-w")
                                .addClass($.jgrid.icons.form.prev);
                        } else if ($this.hasClass("ui-icon-triangle-1-e")) {
                            $this.removeClass("ui-icon ui-icon-triangle-1-e")
                                .addClass($.jgrid.icons.form.next);
                        } else if ($this.hasClass("ui-icon-disk")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.html("<span class=\"" + $.jgrid.icons.form.save + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-close")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.removeClass("fm-button-icon-left")
                                .addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
                        }

                    });
                }).bind("jqGridHeaderClick", function (e, gridstate) {
                    var $icon;
                    if (this.p.fontAwesomeIcons) {
                        $icon = $(this).closest(".ui-jqgrid").find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span");
                        if (gridstate === "visible") {
                            $icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-down")
                                .addClass($.jgrid.icons.titleVisibleGrid).parent().addClass($.jgrid.icons.titleIcon);
                        } else if (gridstate === "hidden") {
                            $icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-up")
                                .addClass($.jgrid.icons.titleHiddenGrid).parent().addClass($.jgrid.icons.titleIcon);
                        }
                    }
                }).bind("jqGridInitGrid", function () {
                    var $this = $(this), $pager, $sortables;

                    if (this.p.fontAwesomeIcons) {
                        $pager = $this.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($.jgrid.icons.pager.first);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-prev")
                            .removeClass("ui-icon ui-icon-seek-prev")
                            .addClass($.jgrid.icons.pager.prev);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-next")
                            .removeClass("ui-icon ui-icon-seek-next")
                            .addClass($.jgrid.icons.pager.next);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-end")
                            .removeClass("ui-icon ui-icon-seek-end")
                            .addClass($.jgrid.icons.pager.last);

                        $this.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("fa fa-arrow-circle-up").parent().addClass("ui-corner-all fa-title");

                        $sortables = $this.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("fa fa-sort-asc fa-lg");
                        $sortables.find(">span.ui-icon-triangle-1-n")
                            .removeClass("ui-icon ui-icon-triangle-1-n")
                            .addClass("fa fa-sort-desc fa-lg");
                    }
                });
            });
        }
    });
}(jQuery));

jQuery.jqGrid.checkboxFontAwesome4.js:

/*global jQuery */
(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.fn.fmatter, {
        checkboxFontAwesome4: function (cellValue, options) {
            var title = options.colModel.title !== false ? ' title="' + (options.colName || options.colModel.label || options.colModel.name) + '"' : '';
            return (cellValue === 1 || String(cellValue) === "1" || cellValue === true || String(cellValue).toLowerCase() === "true") ?
                '<i class="fa fa-check-square-o fa-lg"' + title + '></i>' :
                '<i class="fa fa-square-o fa-lg"' + title + '></i>';
        }
    });
    $.extend($.fn.fmatter.checkboxFontAwesome4, {
        unformat: function (cellValue, options, elem) {
            var cbv = (options.colModel.editoptions) ? options.colModel.editoptions.value.split(":") : ["Yes", "No"];
            return $(">i", elem).hasClass("fa-check-square-o") ? cbv[0] : cbv[1];
        }
    });
}(jQuery));

更新：Another demo 包含一些额外的 CSS 样式，如果其中包含 Bootstrap 3.0.2 的 bootstrap.css，则可以提高 jqGrid 的可见性。我确信样式不是最好的，但是可以解决我在测试中发现的问题。以下是样式：

.ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox {
    height: auto;
    width: auto;
    line-height: inherit;
}
.ui-jqgrid .ui-pg-table .ui-pg-selbox {
    padding: 1px;
}
.ui-jqgrid { line-height: normal; }
div.ui-jqgrid-view table.ui-jqgrid-btable {
    border-style: none;
    border-top-style: none;
    border-collapse: separate;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title {
    border-collapse: separate;
    margin-top: 0;
    top: 0;
    margin-right: 2px;
    height: 22px;
    width: 20px;
    padding: 2px;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title.ui-state-hover span {
    margin-top: -1px;
    margin-left: -1px;
}
.ui-paging-info { display: inline; }
.ui-jqgrid .ui-pg-table { border-collapse: separate; }
div.ui-jqgrid-view table.ui-jqgrid-btable td {
    border-left-style: none
}
div.ui-jqgrid-view table.ui-jqgrid-htable {
    border-style: none;
    border-top-style: none;
    border-collapse: separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable th {
    border-left-style: none
}
.ui-jqgrid .ui-jqgrid-htable th div {
    height: 14px;
}
.ui-jqgrid .ui-jqgrid-resize {
    height: 18px !important;
}

更新 2： One more demo 适用于 Font Awesome 4.2 和 Bootstrap 3.2。使用非常简单。应该包括一些 .css（jQuery.jqGrid.fontAwesome4.css 和 jQuery.jqGrid.bootstrap-fixes.css）和 .js 文件（jQuery.jqGrid.fontAwesome4.js 和 jQuery.jqGrid.checkboxFontAwesome4.js），并在创建网格之前使用 .jqGrid("initFontAwesome")。为了解决height 在第二次打开时编辑表单的问题，我另外使用了beforeInitData: function () { $("#editmod" + this.id).remove(); }。可以从here下载jQuery.jqGrid.fontAwesome4.css、jQuery.jqGrid.bootstrap-fixes.css、jQuery.jqGrid.fontAwesome4.js和jQuery.jqGrid.checkboxFontAwesome4.js的最新版本。

Answer 2

对于自定义按钮，这里是快速和...解决方法：

$(grid).jqGrid('navButtonAdd', pager, {
        buttonicon: 'none',
        caption: '<span class="my-fa-icon fa fa-barcode"></span> My Caption Here',
        id: 'btnMyButton'
    })

如果您需要动态更改标题，请更新 div（代表按钮）html（不是文本）：

var myButton = $($(grid)[0].p.pager + '_left ' + 'td#btnMyButton');
$(myButton ).html('<span class="my-fa-icon fa fa-barcode"></span> My NEW Caption Here');

我包含了一个 css 类，.my-fa-icon，以防你想添加一些自定义（并使显示更接近 jqGrid 所做的） - 例如，你可以将它添加到你的 css 文件中：

.ui-jqgrid .ui-jqgrid-pager .ui-pg-button .ui-pg-div span.my-fa-icon { margin: 0 2px; width: 1.4em; font-size: 1.4em; float: left; overflow: hidden; }