如何将自定义图标添加到 JqGrid 顶级工具栏按钮？答案

【问题标题】：How to add custom icon to JqGrid top-level toolbar button?如何将自定义图标添加到 JqGrid 顶级工具栏按钮？
【发布时间】：2012-08-13 11:14:07
【问题描述】：

我使用here 信息在 IE9 中使用以下代码在 JqGrid 顶级工具栏中添加了一个自定义按钮。

出现插入符号图标而不是图像。 IE9 网络选项卡显示未发出对 Images/calendar.png 的请求。

   $grid.jqGrid('navButtonAdd', '#grid_toppager', {
        caption: '',
        id: "grid_mybutton",

        buttonicon: 'my-image',
        onClickButton: function () { 
            window.location =  'Report';
          }
    });

css 文件：

.ui-button .ui-icon.my-image { 
    background-image: url("Images/calendar.png"); 
    width: 16; 
    height: 16;  
} 

.ui-button.ui-state-hover .ui-icon.my-image { 
    background-image: url("Images/calendar.png"); 
    width: 16; 
    height: 16;  
}

如何添加自定义图标？

【问题讨论】：

您是要替换对话框右上角的 x 图标，还是要使用自己的操作将新的可点击图标添加到工具栏？
我想添加带有图标Images/calendar.png和自定义操作window.location = 'Report'的新按钮
你的CSS：“.ui-button.ui-state-hover .ui-icon.my-image”应该是“.ui-button, .ui-state-hover, .ui- icon, .my-image" 更新：我在下面的答案中添加了更多解释

标签： javascript jquery jquery-ui jqgrid

【解决方案1】：

jQuery 样式将始终覆盖您最后应用的样式。

除了jjay225 指出的那些你修复了你的引用，将!important 标签添加到你的图像样式中以确保它始终被应用。

在下面的演示中尝试一下，删除!important，得到^，再次添加它，得到你的图像。

见DEMO

没有您的完整代码，我只是使用 jQuery append() 在工具栏上添加了一个图标并添加了所需的 CSS。

尽管使用任何调试工具，例如：FF 中的 FireBug 和 Chrome 或 IE 中的内置工具，您都可以检查新图标的确切类/id 值并修复您可能遇到的任何 css 引用问题。

【讨论】：

那个“！important”是非常重要的Andrus。很好的补充弗朗索瓦

【解决方案2】：

你的 CSS

.ui-button.ui-state-hover .ui-icon.my-image

应该是

 .ui-button, .ui-state-hover, .ui-icon, .my-image

为什么不试试上课呢

.my-image
{
    background-image: url("Images/calendar.png"); 
     width: 16; 
     height: 16;  
  }

【讨论】：