jqGrid:Font Awesome 图标 [英] jqGrid:Font Awesome Icons
问题描述
我正在尝试使用 Font Awesome 图标代替 jqGrid 中工具栏的 jqueryUI 图标(添加、编辑、删除、查看图标).
formatter: "checkbox"
只需要在 jquery.jqGrid.min 之后包含
(或 jQuery.jqGrid.checkboxFontAwesome4.js
.jsjquery.jqGrid.src.js
):
格式化程序 "checkboxFontAwesome4" 比 formatter: "checkbox"
:
- 可以通过单击图标来选择行.标准的
formatter: "checkbox"
使用禁用的.在大多数 Web 浏览器上,单击禁用的控件将被阻止.我在clickableCheckbox"之前发布(见这里 和 此处).
- 我使用树复选框格式化程序对具有多行和多列的网格进行的测试表明,格式化程序checkboxFontAwesome4"的渲染速度最快(在我测试的所有网络浏览器中),
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.F A {文本缩进:0;高度:自动;宽度:自动;背景图像:无;溢出:可见;填充顶部:1px;}.ui-jqgrid .ui-pg-table .ui-pg-div {文本缩进:0;高度:自动;宽度:自动;背景图像:无;溢出:可见;填充顶部:1px;}.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title span { font-size: 18px;显示:内联块;}.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title { margin-top: 0;顶部:0;左边距:2px;填充底部:2px;}.ui-jqgrid .ui-icon-asc.fa { 高度:自动;边距顶部:0;}.ui-jqgrid .ui-icon-asc.fa, .ui-jqgrid .ui-icon-desc.fa {高度:自动;边距顶部:2px;左边距:2px;}.ui-jqgrid .s-ico>.ui-state-disabled.fa, .s-ico>.ui-state-disabled.fa { padding: 0;}.ui-jqdialog .ui-jqdialog-titlebar-close { 文字装饰:无;右:0.2em !重要}.ui-jqdialog .ui-jqdialog-titlebar-close>span { margin-top: 3px;左边距:5px;}.ui-jqdialog .EditTable .fm-button-icon-right { padding-left: 0;padding-right: 0.5em;浮动:右;}.ui-jqdialog .EditTable .fm-button-icon-left { padding-left: 0;向左飘浮;}.ui-jqdialog .EditButton>.fm-button { display: block;宽度:自动;}.ui-jqdialog .EditButton>.fm-button>span { float: left;左边距:0.5em;右边距:0;}.ui-jqgrid .ui-jqdialog .fm-button>span { margin-left: 0.5em;右边距:0;}.ui-jqdialog>.ui-resizable-se { 底部:-3px;右:-3px}
jQuery.jqGrid.fontAwesome4.js
:
/*global $ */(功能($){严格使用";/*jslint unparam: 真 */$.extend($.jgrid, {图标:{common: "fa",//稍后实现scale: "",//稍后实现.例如作为fa-lg"titleVisibleGrid: "fa fa-arrow-circle-up",titleHiddenGrid: "fa fa-arrow-circle-down",titleIcon: "ui-corner-all fa-title",关闭: "fa fa-times",fa fa-pencil fa-fw",添加:"fa fa-plus fa-fw",del: "fa fa-trash-o fa-fw",search: "fa fa-search fa-fw",refresh: "fa fa-refresh fa-fw",视图: "fa fa-file-o fa-fw",寻呼机:{第一个:fa fa-step-backward fa-fw",上一页: "fa fa-backward fa-fw",next: "fa fa-forward fa-fw",最后:fa fa-step-forward fa-fw"},形式: {上一页: "fa fa-caret-left",下一个: "fa fa-caret-right",保存:fa fa-floppy-o",撤销: "fa fa-undo",关闭: "fa fa-times",删除:fa fa-trash-o"},搜索表格:{重置:fa fa-undo",查询:fa fa-comments-o",搜索:发发搜索"}}});$.extend($.jgrid.nav, {编辑图标:$.jgrid.icons.edit,添加图标:$.jgrid.icons.add,delicon: $.jgrid.icons.del,搜索图标:$.jgrid.icons.search,refreshicon: $.jgrid.icons.refresh,视图图标:$.jgrid.icons.view});$.extend($.jgrid.defaults, {fontAwesomeIcons: true//新选项将用于回调});$.extend($.jgrid, {originalCreateModal: $.jgrid.originalCreateModal ||$.jgrid.createModal,createModal: 函数 (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: 函数 ($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() + "</跨度>");}});}});$.extend($.jgrid.del, {afterShowForm: 函数 ($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);}});如果 ($fmButtonNew.children().length > 0) {//删除 按钮之间$tdButtons.replaceWith($fmButtonNew);}}});$.jgrid.extend({initFontAwesome: 函数 () {返回 this.each(function () {var $grid = $(this);$grid.bind("jqGridFilterAfterShow", function (e, $form) {//替代 afterShowSearchvar $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() + "</跨度>");} 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() + "</跨度>");} 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() + "</跨度>");}});}).bind("jqGridAddEditBeforeShowForm", function (e, $form) {//替代 beforeShowForm 回调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() + "</跨度>");}});}).bind("jqGridHeaderClick", function (e, gridstate) {var $icon;如果(this.p.fontAwesomeIcons){$icon = $(this).closest(".ui-jqgrid").find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span");如果(网格状态 ===可见"){$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 === "隐藏") {$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;如果(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
:
/*全局jQuery */(功能($){严格使用";/*jslint unparam: 真 */$.extend($.fn.fmatter, {checkboxFontAwesome4:函数(cellValue,选项){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"' + 标题 + '></i>':'<i class="fa fa-square-o fa-lg"' + title + '></i>';}});$.extend($.fn.fmatter.checkboxFontAwesome4, {取消格式:函数(cellValue,选项,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));
更新:另一个演示如果包含 Bootstrap 3.0.2 的 bootstrap.css
,则包含一些额外的 CSS 样式,这些样式可以提高 jqGrid 的可见性.我确信这些样式不是最好的,但是可以解决我在测试中发现的问题.以下是样式:
.ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox {高度:自动;宽度:自动;行高:继承;}.ui-jqgrid .ui-pg-table .ui-pg-selbox {填充:1px;}.ui-jqgrid { 行高:正常;}div.ui-jqgrid-view table.ui-jqgrid-btable {边框样式:无;边框顶部样式:无;边框折叠:分开;}.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title {边框折叠:分开;边距顶部:0;顶部:0;右边距:2px;高度:22px;宽度:20px;填充:2px;}.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title.ui-state-hover 跨度{边距顶部:-1px;左边距:-1px;}.ui-paging-info { 显示:内联;}.ui-jqgrid .ui-pg-table { 边框折叠:分开;}div.ui-jqgrid-view table.ui-jqgrid-btable td {左边框样式:无}div.ui-jqgrid-view table.ui-jqgrid-htable {边框样式:无;边框顶部样式:无;边框折叠:分开;}div.ui-jqgrid-view table.ui-jqgrid-btable th {左边框样式:无}.ui-jqgrid .ui-jqgrid-htable 第 div {高度:14px;}.ui-jqgrid .ui-jqgrid-resize {高度:18px!重要;}
更新 2: 另一个演示 适用于 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();}
另外.可以下载最新版本的jQuery.jqGrid.fontAwesome4.css
、jQuery.jqGrid.bootstrap-fixes.css
、jQuery.jqGrid.fontAwesome4.js
和 jQuery.jqGrid.checkboxFontAwesome4.js
来自 这里.
I am trying to use Font Awesome icons in place of the jqueryUI icons for the toolbar in my jqGrid (add,edit,delete,view icons).
This demo is exactly what I would like to accomplish. I've read Oleg's answer that demonstrates removing the icon class and adding the Font Awesome icons in its place. But when I try to do that nothing changes. I believe I'm possibly referencing the icons wrong.
I downloaded Font Awesome 4.0.3 and I have jqGrid 4.5.4--In the _icons.scss file of the FA file tree the icons are referenced like this:
.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }
But in Oleg's suggested code the new icons are labeled "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");
This is my code: I only did the edit icon for this example. I also used the new label for the icons, "fa-pencil".
jQuery("#grid").jqGrid('navGrid','#grid_toppager"', {editicon: "fa-pencil", edit:true});
$('#grid_toppager .navtable .ui-pg-div>span').removeClass('ui-icon');
What combination of code do I need in order to replace the ui-icons with the Font Awesome icons?
Any helpful tips would be appreciated, thanks
I agree that my old answer can't be used with Font Awesome 4 because the names of the classes are changed in version 4. I use Font Awesome 4 myself in solutions which I develop for my customers and I decide to share it with other.
The files jQuery.jqGrid.fontAwesome4.css, jQuery.jqGrid.fontAwesome4.js and jQuery.jqGrid.checkboxFontAwesome4.js contains new jqGrid method initFontAwesome
and formatter: "checkboxFontAwesome4"
. The demo demonstrates the usage of the files:
The usage of suggested method initFontAwesome
is very simple. First of all one need to include additional CSS and JavaScript files:
<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>
Then one modify well known line
$("#grid").jqGrid({
... // jqGrid options and callbacks
});
to
$("#grid").jqGrid("initFontAwesome").jqGrid({
... // jqGrid options and callbacks
});
To use formatter: "checkboxFontAwesome4"
instead of predefined formatter formatter: "checkbox"
one need just includes jQuery.jqGrid.checkboxFontAwesome4.js
after jquery.jqGrid.min.js
(or jquery.jqGrid.src.js
):
<script type="text/javascript"
src=".../jQuery.jqGrid.checkboxFontAwesome4.js"></script>
The formatter "checkboxFontAwesome4" have some advantage to formatter: "checkbox"
:
- one can select the row by clicking on the icons. The standard
formatter: "checkbox"
uses disabled<input type="checkbox">
. Clicking on disabled control will be blocked on the most web browsers. I posted before "clickableCheckbox" (see here and here). - The tests which I made with grids having many rows and columns using the tree checkbox formatters shows that formatter "checkboxFontAwesome4" is the most quick in rendering (in all web browsers where I it tested),
formatter: "checkbox"
is lower and "clickableCheckbox" is the mostly slow. Soformatter "checkboxFontAwesome4"
is not only cool, but it's really quick in rendering.
At the end I includes the current state of jQuery.jqGrid.fontAwesome4.css, jQuery.jqGrid.fontAwesome4.js and 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));
UPDATED: Another demo contains some additional CSS styles which improve visibility of jqGrid if one includes bootstrap.css
of the Bootstrap 3.0.2. I am sure that the styles are not the best, but there fix the problems which I found in my tests. Below are the styles:
.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;
}
UPDATED 2: One more demo works with Font Awesome 4.2 and Bootstrap 3.2. The usage is very easy. One should include some .css (jQuery.jqGrid.fontAwesome4.css
and jQuery.jqGrid.bootstrap-fixes.css
) and .js files (jQuery.jqGrid.fontAwesome4.js
and jQuery.jqGrid.checkboxFontAwesome4.js
) and to use .jqGrid("initFontAwesome")
before the grid are created. To fix problems with height
of editing form at the second opening I used beforeInitData: function () { $("#editmod" + this.id).remove(); }
additionally. One can download the latest versions of jQuery.jqGrid.fontAwesome4.css
, jQuery.jqGrid.bootstrap-fixes.css
, jQuery.jqGrid.fontAwesome4.js
and jQuery.jqGrid.checkboxFontAwesome4.js
from here.
这篇关于jqGrid:Font Awesome 图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!