jqGrid: Font Awesome Icons

Intento utilizar íconos de Font Awesome en lugar de los icons de jqueryUI para la barra de herramientas en mi jqGrid (agregar, editar, eliminar, ver íconos).

Esta demostración es exactamente lo que me gustaría lograr. He leído la respuesta de Oleg que demuestra la eliminación de la clase de icono y la adición de los icons de Font Awesome en su lugar. Pero cuando trato de hacer eso, nada cambia. Creo que estoy posiblemente haciendo referencia a los íconos incorrectos.

Descargué Font Awesome 4.0.3 y tengo jqGrid 4.5.4 – En el archivo _icons.scss del árbol de archivos FA, los icons se referencian de esta manera:

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

Pero en el código sugerido de Oleg, los nuevos icons están etiquetados como “icono-lápiz”:

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

Este es mi código: solo hice el icono de edición para este ejemplo. También utilicé la nueva etiqueta para los icons, “fa-pencil”.

 jQuery("#grid").jqGrid('navGrid','#grid_toppager"', {editicon: "fa-pencil", edit:true}); $('#grid_toppager .navtable .ui-pg-div>span').removeClass('ui-icon'); 

¿Qué combinación de código necesito para reemplazar los ui-icons con los icons de Font Awesome?

Cualquier consejo útil sería apreciado, gracias

Acepto que mi respuesta anterior no se puede usar con Font Awesome 4 porque los nombres de las clases se cambian en la versión 4. Yo uso Font Awesome 4 en soluciones que desarrollo para mis clientes y decido compartirlas con otros.

Los archivos jQuery.jqGrid.fontAwesome4.css , jQuery.jqGrid.fontAwesome4.js y jQuery.jqGrid.checkboxFontAwesome4.js contienen el nuevo método initFontAwesome y el formatter: "checkboxFontAwesome4" . La demostración demuestra el uso de los archivos:
enter image description here

El uso del método sugerido initFontAwesome es muy simple. En primer lugar, es necesario incluir archivos CSS y JavaScript adicionales:

  ...   ...    

Entonces uno modifica la línea bien conocida

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

a

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

Para usar el formatter: "checkboxFontAwesome4" lugar del formateador de formatter: "checkbox" predefinido formatter: "checkbox" solo necesita jQuery.jqGrid.checkboxFontAwesome4.js después de jquery.jqGrid.min.js (o jquery.jqGrid.src.js ):

  

El formateador “checkboxFontAwesome4” tiene alguna ventaja con el formatter: "checkbox" :

  • uno puede seleccionar la fila haciendo clic en los icons. El formatter: "checkbox" estándar formatter: "checkbox" usa disabled . Al hacer clic en el control deshabilitado, se bloqueará en la mayoría de los navegadores web. Publiqué antes de “clickableCheckbox” (mira aquí y aquí ).
  • Las pruebas que realicé con cuadrículas con muchas filas y columnas utilizando los formateadores de casillas de verificación de árbol muestran que el formateador “checkboxFontAwesome4” es el más rápido en la representación (en todos los navegadores web donde probé), formatter: "checkbox" es más bajo y “clickableCheckbox” “es el más lento. Así que el formatter "checkboxFontAwesome4" no solo es genial, sino que es muy rápido en el renderizado.

Al final, incluyo el estado actual de jQuery.jqGrid.fontAwesome4.css , jQuery.jqGrid.fontAwesome4.js y 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("" + $fmButton.text() + ""); } }); } }); $.extend($.jgrid.del, { afterShowForm: function ($form) { var $dialog = $form.closest(".ui-jqdialog"), $tdButtons = $dialog.find(".EditTable .DelButton"), $fmButtonNew = $(""), $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("" + $fmButton.text() + ""); $fmButtonNew.append($fmButton); } else if ($this.hasClass("ui-icon-cancel")) { $fmButton.html("" + $fmButton.text() + ""); $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("" + $fmButton.text() + ""); } else if ($this.hasClass("ui-icon-arrowreturnthick-1-w")) { $this.closest(".EditButton").css("float", "left"); $fmButton.addClass("fm-button-icon-left") .html("" + $fmButton.text() + ""); } else if ($this.hasClass("ui-icon-comment")) { $this.closest(".EditButton").css("float", "right"); $fmButton.addClass("fm-button-icon-right") .html("" + $fmButton.text() + ""); } }); }).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("" + $fmButton.text() + ""); } 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("" + $fmButton.text() + ""); } }); }).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") ? '' : ''; } }); $.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)); 

ACTUALIZADO : Otra demostración contiene algunos estilos CSS adicionales que mejoran la visibilidad de jqGrid si uno incluye bootstrap.css de Bootstrap 3.0.2. Estoy seguro de que los estilos no son los mejores, pero solucionan los problemas que encontré en mis pruebas. Debajo están los estilos:

 .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; } 

ACTUALIZADO 2: Una demostración más funciona con Font Awesome 4.2 y Bootstrap 3.2 . El uso es muy fácil. Uno debe incluir algunos jQuery.jqGrid.fontAwesome4.css ( jQuery.jqGrid.fontAwesome4.css y jQuery.jqGrid.bootstrap-fixes.css ) y .js ( jQuery.jqGrid.fontAwesome4.js y jQuery.jqGrid.checkboxFontAwesome4.js ) y usarlos .jqGrid("initFontAwesome") antes de crear la cuadrícula. Para solucionar problemas con la height del formulario de edición en la segunda apertura, utilicé beforeInitData: function () { $("#editmod" + this.id).remove(); } beforeInitData: function () { $("#editmod" + this.id).remove(); } adicionalmente. Uno puede descargar las últimas versiones de jQuery.jqGrid.fontAwesome4.css , jQuery.jqGrid.bootstrap-fixes.css , jQuery.jqGrid.fontAwesome4.js y jQuery.jqGrid.checkboxFontAwesome4.js desde aquí .

Para botones personalizados, aquí es rápido y … funciona:

 $(grid).jqGrid('navButtonAdd', pager, { buttonicon: 'none', caption: ' My Caption Here', id: 'btnMyButton' }) 

si necesita cambiar el título dinámicamente, actualice el div (que representa el botón) html (no texto):

 var myButton = $($(grid)[0].p.pager + '_left ' + 'td#btnMyButton'); $(myButton ).html(' My NEW Caption Here'); 

Incluí una clase css, .my-fa-icon, en caso de que quiera agregar alguna personalización (y acercar la pantalla a lo que hace jqGrid); por ejemplo, puede agregar esto a su archivo 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; }