如果使用fontawesome圖標集，如何將操作按鈕添加到免費的jqgrid工具欄

Question

FontAwesome圖標集在免費jqgrid中使用。 默認操作按鈕顯示為字體驚人的按鈕。 我試圖將自定義字體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圖標。 如何添加帶有字體真棒圖標的按鈕？

Answer 1

如下所示：

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

Answer 2

您可以做幾乎相同的事情來在免費的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>')

您可以在演示中看到結果：

根據您的確切要求，您可能需要使用singleSelectClickMode: "selectonly"以防止在第二次單擊同一行時取消選擇網格行。

PS，我將考慮簡化下一個免費jqGrid版本中自定義操作按鈕的添加。