用自定义图标替换jqGrid的删除图标

Question

我想用自己的Icon(newTrash-icon.png)更改操作列中jqGrid的删除图标。我已经看到jqGrid从一个png图标文件加载Icon。如何使用其他垃圾桶图标替换默认垃圾桶图标。

我尝试了以下代码，但它不起作用。

在我的gridComplete

中

$('.ui-icon-trash').removeClass('ui-icon-trash').addClass('ui-icon-customtrash');

在我的CSS中

.ui-icon-customtrash {
    background: url("~/Images/newTrash-icon.png");
    background-position: -64px -16px;

}

我希望显示以下图标代替默认删除图标

Answer 1

您可以做的只是使用navGrid的delicon选项：

$("#list").jqGrid("navGrid", "#pager", {delicon: "ui-icon-customtrash"});

The demo使用delicon: "ui-icon-scissors"并显示

更新：The demo使用您发布的图标演示相同内容。它显示

我使用了以下CSS

.ui-state-default .ui-icon-customtrash {
    background: url("http://i.stack.imgur.com/Gii7J.png");
    background-position: 0 0;

}

Answer 2

我找到了答案。 我已使用IcoMoon App（http://icomoon.io/app/）替换了内联操作图标（删除和Notes图标）。我从IcoMoon网站上选择了我需要的不同图标，并创建了一个我下载并添加到我的应用程序中的样式表。使用IcoMoon提供的类名（“idoc-icon-trash”），我在afterInsertRow事件和boooom中添加了下面的代码..它的工作方式如图所示。

$("#gridJQ .ui-icon-trash").removeClass('ui-icon ui-icon-trash').addClass('idoc-icon-trash');

.idoc-icon-trash {
    font-size: 19px;
    color: #022462;
}