小编klm*_*m10的帖子

我正在尝试使用Font Awesome图标代替jqGrid中工具栏的jqueryUI图标(添加,编辑,删除,查看图标).

这个演示正是我想要完成的.我读过Oleg的答案,演示了删除图标类并在其位置添加Font Awesome图标.但是,当我尝试这样做时,没有任何改变.我相信我可能会错误地引用图标.

我下载了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-icons,我需要哪些代码组合？

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

我使用jqGrid来维护数据库,并且需要在添加/编辑表单对话框中只读取某些字段.我看到jqGrid支持editoptions下的只读字段,但有可能某些"灰色"只读取输入框,所以有一个视觉提示让用户知道该字段是只读的而不是可编辑的？

提前致谢.

更新 感谢您的快速回复Oleg!我尝试了你发布的内容,但我在IDE(Netbeans)中收到了很多代码警告.这是我的代码:

jQuery("#grid").jqGrid('navGrid','#grid_toppager', 
    {
         add:true,
         edit:true,
         view:true, 
         search:false, 
         del:false, 
         refresh:true
    },
    { // Edit form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         viewPagerButtons:false, //disables the arrows to next records
         topinfo:"Fields marked with (*) are required",
         resize:false,
         recreateForm: true,
         beforeShowForm: function ($form) {
             $form.find(".FormElement[readonly]")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
                  .closest(".DataTD")
                  .prev(".CaptionTD")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
    },  
    { // Add form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         topinfo:"Fields marked with (*) are required",
         resize:false,
         reloadAfterSubmit:true,
         closeAfterAdd: true
    },
    { // prmDel

    },

    { // prmSeach

    },

    { //prmView …