用自定義圖標替換jqGrid的刪除圖標

我想更改我自己的Icon(newTrash-icon.png)在操作列中刪除jqGrid的圖標。我已經看到，jqGrid從一個PNG圖標文件加載圖標。如何用其他垃圾桶圖標替換默認垃圾桶圖標。用自定義圖標替換jqGrid的刪除圖標

我試過下面的代碼，但它不起作用。

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

}

我想下面的圖標來取代默認的刪除圖標

來源

2013-10-10 Naveen Reddy

我發現我的答案。我用IcoMoon App（http://icomoon.io/app/）替換了內聯動作圖標（刪除和便籤圖標）。我從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; 
}

enter image description here

來源

2013-10-12 01:23:30

你可以做的顯示只是的用法選項navGrid：

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

The demo使用delicon: "ui-icon-scissors"並顯示

enter image description here

修訂：The demo表現出同樣的使用你張貼的圖標。它顯示

enter image description here

我用下面的CSS

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

}

來源

2013-10-10 23:48:58 Oleg

感謝您的答覆奧列格！是的，上面的代碼只適用於jquery-UI.css中現有的圖標列表。但在我的情況下，我沒有在由jquery-UI.css提供的圖標列表中的「ui-icon-customtrash」。這是我自己的自定義圖標。是否有任何其他解決方法來顯示我自己的圖標？ –

@ minnu4515：你可以在你的文字中加入圖標嗎？ – Oleg

我剛剛添加了我試圖用 –

用自定義圖標替換jqGrid的刪除圖標

回答

相關問題