如果使用 fontawesome 图标集，如何将操作按钮添加到免费的 jqgrid 工具栏答案

【问题标题】：How add action button to free jqgrid toolbar if fontawesome icon set is used如果使用 fontawesome 图标集，如何将操作按钮添加到免费的 jqgrid 工具栏
【发布时间】：2015-03-14 08:09:18
【问题描述】：

FontAwesome 图标集用于免费 jqgrid。默认操作按钮显示为 fontawesome 按钮。我尝试将自定义字体 avesome 图标按钮添加到 jqgrid 行。这适用于 jquery ui 图标：

        loadComplete: function() {
            var iCol = getColumnIndexByName($(this),'_actions');
            $(this).children("tbody").children("tr.jqgrow")
               .children("td:nth-child("+(iCol+1)+")")
               .each(function() {
                   $("<div>",
                     {
                         mouseover: function() {
                             $(this).addClass('ui-state-hover');
                         },
                         mouseout: function() {
                             $(this).removeClass('ui-state-hover');
                         },
                         click: function(e) {
                             resetSelection();
                             idsOfSelectedRows = [$(e.target).closest("tr.jqgrow").attr("id")];
                             $("#grid").jqGrid('setSelection', $(e.target).closest("tr.jqgrow").attr("id"), false);
                             $('#grid_postbutton').click();
                         }
                     }
                ).css({"margin-left": "2px", float:"left"})
                 .addClass("ui-pg-div ui-inline-post")
                 // .append('<span class="ui-icon fa-lock"></span>')
                 .append('<span class="ui-icon ui-icon-locked"></span>')
                 .prependTo($(this).children("div"));

我用fa-lock替换了ui-icon-locked

   .append('<span class="ui-icon fa-lock"></span>')

但字体真棒图标没有出现。出现类似插入符号的 jquery-ui 图标。如何添加带有字体真棒图标的按钮？

【问题讨论】：

标签： javascript jquery css jqgrid free-jqgrid

【解决方案1】：

您几乎可以在免费的 jqGrid 4.8 中创建自定义按钮。你只需要删除不需要的

.css({"margin-left": "2px", float:"left"})

替换

.append('<span class="ui-icon ui-icon-locked"></span>')

到

.append('<span class="fa ui-state-default fa-fw fa-lock"></span>')

你可以在the demo看到结果：

根据您的具体要求，您可能需要使用singleSelectClickMode: "selectonly" 来防止在第二次单击同一行时取消选择网格行。

附：我会考虑在下一版本的免费 jqGrid 中简化自定义操作按钮的添加。

【讨论】：

【解决方案2】：

如下所示：

.append('<span class="fa fa-lock"></span>')

【讨论】：