jqGrid：字体真棒图标
Posted
技术标签:
【中文标题】jqGrid：字体真棒图标【英文标题】：jqGrid:Font Awesome Icons 【发布时间】：2013-12-07 18:00:05 【问题描述】：我正在尝试使用 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？
任何有用的提示将不胜感激，谢谢
【问题讨论】：
【参考方案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 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的最新版本。
【讨论】：
嗨，奥列格，我现在可以按照您的指示进行操作，现在我的网格正在使用超棒的字体图标！非常感谢你的帖子。对于我的项目来说，这是网格中非常重要的一部分。我现在的问题是，当我单击我的图标（例如添加）时，模态表单以非常大的字体显示，但我似乎无法找到它在哪里被格式化为这么大。您知道如何格式化添加/编辑表单和警告消息框的字体大小吗？再次感谢您的所有帮助！ 没关系，我可以在 jqdialog font-size 下的 css 文件中找到它。再次感谢字体真棒图标锻炼！ @klm10：不客气！我喜欢字体真棒。在写完the old answer 之后，我尝试推动一些人使用它。例如，我使用 jQuery UI（参见 here 和 here）。我希望 jqGrid 和 jQuery 在不久的将来会使用这种字体或其他一些矢量字体。我希望我的回答也能帮助许多其他人。 如果有人想解决这个问题并修复一些浏览器问题，例如 chrome 中的滚动条或在移动设备上进行测试等，您可以使用这个小提琴 jsfiddle.net/farrukhsubhani/FcFND 它只是复制所有链接的文件。我希望@Oleg 不介意从他的服务器链接 css 和 js。 @FarrukhSubhani：可以添加例如.ui-jqgrid .ui-jqgrid-hdiv padding-top: 2px; overflow-y: hidden; 来解决问题。见jsfiddle.net/FcFND/3【参考方案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;
【讨论】：
以上是关于jqGrid：字体真棒图标的主要内容，如果未能解决你的问题，请参考以下文章