1

FontAwesome アイコン セットは、フリーの jqgrid で使用されています。デフォルトのアクション ボタンは fontawesome ボタンとして表示されます。jqgrid行にカスタムフォントのavesomeアイコンボタンを付けてみました。これは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"));

ui-icon-locked私はfa-lock使用して置き換えました

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

しかし、フォントの素晴らしいアイコンは表示されません。キャレットのような jquery-ui アイコンが表示されます。フォントの素晴らしいアイコンでボタンを追加するには?

4

2 に答える 2

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>')

デモで結果を見ることができます：

ここに画像の説明を入力

singleSelectClickMode: "selectonly"同じ行を2回クリックしたときにグリッドの行が選択解除されないようにするために使用する必要がある正確な要件に依存します。

PS 次のバージョンの無料の jqGrid で、カスタム アクション ボタンの追加を簡素化することを検討します。

于 2015-03-14T11:25:21.617 に答える
1

以下のようにします。

.append('<span class="fa fa-lock"></span>')
于 2015-03-14T08:19:53.017 に答える