用自定义图标替换jqGrid的删除图标 [英] Replace Delete Icon of jqGrid with custom Icon

问题描述

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

I wanted to change just the delete Icon of jqGrid in actions column with my own Icon(newTrash-icon.png). I've seen that jqGrid loads Icon from one png icons file. How do I replace the default trashcan Icon with some other trashcan Icon.

我尝试了下面的代码，但是没有用.

I tried below code but it doesn't work.

在我的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;

}

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

I want the below icon to display in place of default delete icon

推荐答案

我找到了答案. 我已使用IcoMoon应用程序( http://icomoon.io/app/).我从IcoMoon网站上选择了所需的其他图标，并创建了一个样式表，该样式表已下载并添加到我的应用程序中.并使用IcoMoon提供的类名("idoc-icon-trash")，在我的afterInsertRow事件和boooom中添加了以下代码.它的工作原理如图所示.

I found my answer. I have replaced inline Action Icons(delete and Notes icons) using IcoMoon App (http://icomoon.io/app/). I selected different icons I needed from IcoMoon website and created a stylesheet that I downloaded and added to my application. And using the class name("idoc-icon-trash") provided by IcoMoon I added below code in my afterInsertRow event and boooom.. it worked as shown in the figure.

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

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

这篇关于用自定义图标替换jqGrid的删除图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！