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

Question

我正在尝试在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仍会显示一个。

Answer 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上的OutPut：