如何在 jqGrid 中显示自定义功能的添加和编辑图标？答案

【问题标题】：How do I display add and edit icons for custom function in jqGrid?如何在 jqGrid 中显示自定义功能的添加和编辑图标？
【发布时间】：2014-02-25 16:23:51
【问题描述】：

我正在尝试在 jqgrid 中使用自定义添加和编辑功能。我可以让添加和编辑功能正常工作，但我无法让添加和编辑图标正确显示。相反，会出现一个箭头 (^) 而不是加号或编辑。我试过的： *jqgrid前后导入jquery-ui

//jqgrid代码

$('#jqgrid').jqGrid({
        ...
            })
        .navButtonAdd("#pager", {
            caption:"Add",  
        buttonicon:"ui-icon-add", 
        onClickButton: function(){ 
            $("#lui_jqgrid").show()
            $('#addForm').show();
            }, 
        position:"last"
            })
        .navButtonAdd('#pager',{ 
        caption:"Edit", 
        buttonicon:"ui-icon-edit", 
        onClickButton: function(){ 
            $('#addForm').show();
               }, 
        position:"last"
            });

我在按钮图标下有“ui-icon-add”和“ui-icon-edit”，但它们没有显示出来。这个项目使用backbone.js，我在jqGrid之前导入jquery-ui.js。

如何让图标显示出来？相反，我可以只拥有标题而没有图标，但删除 buttonicon 仍然会显示一个。

【问题讨论】：

标签： javascript jquery jquery-ui backbone.js jqgrid

【解决方案1】：

使用以下代码更新您的代码。您的代码中有一些错误。

可用按钮为ThemeRoller | jQuery UI，将光标放在将显示样式类。在 jqgrid 中使用这些按钮。

.navButtonAdd("#pager", {
        caption:"",  
    buttonicon:"ui-icon ui-icon-newwin", 
    onClickButton: function(){ 
        $("#addForm").show();
        }, 
    position:"last"
        })
    .navButtonAdd('#pager',{ 
    caption:"", 
    buttonicon:"ui-icon ui-icon-pencil", 
    onClickButton: function(){ 
        $('#addForm').show();
           }, 
    position:"last"
        });

在 jqgrid 的 navgrid 上输出：

【讨论】：