1. 首页
  2. 问答
  3. jqGrid：字体真棒图标

jqGrid：字体真棒图标

2013-11-22 179 views
4

我想在我的jqGrid（添加，编辑，删除，查看图标）工具栏使用字体真棒图标来代替jqueryUI图标。jqGrid：字体真棒图标

This演示正是我想要完成的。我已阅读Oleg的answer，演示如何删除图标类并在其位置添加Font Awesome图标。但是当我试图做到没有任何变化。我相信我可能会引用错误的图标。

我下载字体真棒4.0.3和我的jqGrid 4.5.4 - 在FA文件树中的图标都是这样引用的_icons.scss文件：

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

但在奥列格的推荐代码新图标被标记为“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图标？

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

来源

2013-11-22 klm10

回答

8

我同意my old answer不能使用字体真棒4，因为类的名称在版本4中改变了我的解决方案中使用字体真棒4我这我为我的客户开发，并决定与其他人分享。

的文件jQuery.jqGrid.fontAwesome4.css，jQuery.jqGrid.fontAwesome4.js和jQuery.jqGrid.checkboxFontAwesome4.js包含新的jqGrid方法initFontAwesome和formatter: "checkboxFontAwesome4"。 The demo证明文件的用法：
enter image description here

建议的方法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 formatterformatter: "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"不仅很酷，而且渲染速度非常快。

在最后I包括的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样式，这对提高jqGrid的可见度，如果一个包括引导3.0.2 bootstrap.css。我相信风格并不是最好的，但那里解决了我在测试中发现的问题。下面是样式：

.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作品与字体真棒4.2和引导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。

来源

2013-11-23 17:30:24 Oleg

+0

嗨奥列格，我能够按照你的指示，现在我的网格是使用字体真棒图标！非常感谢你的发布。这是我项目网格中非常重要的一部分。我现在的问题是，当我点击我的图标，如添加模式窗体显示在一个非常大的字体，但我似乎无法找到它的格式如此之大。你知道如何格式化添加/编辑表单和警告消息框的字体大小吗？再次感谢您的帮助！ – klm10

+0

没关系，我能在jqdialog font-size下的css文件中找到它。再次感谢字体真棒图标锻炼！ – klm10

+0

@ klm10：不客气！我喜欢Font Awesome。写完[旧回答]（http://stackoverflow.com/a/13865495/315935）后，我试图推动一些人使用它。例如，我将jQuery UI添加到jQuery UI中（请参阅[here]（http://forum.jquery.com/topic/is-it-time-to-replace-png-icons-of-jquery-ui-css-framework-with -vector-based-web-fonts）和[here]（https://github.com/addyosmani/jquery-ui-bootstrap/issues/127））。我希望jqGrid和jQuery在不久的将来会使用这种字体或其他矢量字体。我跳，我的回答也会帮助其他许多人。 – Oleg

0

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

$(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类，。我-FA-图标，以防万一你想添加一些定制（并且使显示更接近的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; }

来源

2014-12-04 20:10:06 Luchian

相关问题

 相关问题