如何將jQuery UI圖標添加到動態生成的按鈕？

Question

下載jQuery UI時，您會得到一個樣式表，用於選擇任何主題，以及包含圖標的多個圖像文件。我已經想出瞭如何將一個圖標添加到單個元素<button>，但我有一種情況，我在網格中動態生成按鈕（jqGrid）並且想要使用這些圖標。所以，說我想用這個圖標從CSS文件：

.ui-icon-trash { background-position: -176px -96px; } 

然後，我通過處理gridComplete事件的按鈕添加到網格中：

gridComplete: function() { 
    var ids = $("#myGrid").jqGrid('getDataIDs'); 
    for (var i = 0; i < ids.length; i++) { 
     var deleteButton = "<button type='button' style='height: 22px;width: 20px;' title='Delete' onclick=deleteRow(" + ids[i] + ")></button>"; 
     $("#myGrid").jqGrid('setRowData', ids[i], { DeleteButton: deleteButton }); 
    } 
} 

我使用一個類試圖在按鈕標記，例如，deleteRowButton，然後使用jQuery這樣的：

$(".deleteRowButton").button({ 
    icons: { 
     primary: 'ui-icon-trash' 
    }, 
    text: false 
}); 

但是，這是行不通的。我需要做些什麼來讓我的按鈕有這個圖標？

Answer 1

我想你的代碼$(".deleteRowButton").button({icons: {primary: 'ui-icon-trash'}, text: false});沒有工作，因爲你把它放在錯誤的地方。如果您創建的gridComplete內<button class='deleteRowButton' ...>你應該，你發佈的代碼後直接撥打電話$(".deleteRowButton").button(...)也的gridComplete內：

gridComplete: function() { 
    var $this = $(this), ids = $this.jqGrid('getDataIDs'), l = ids.length, 
     i, deleteButton; 
    for (i = 0; i < l; i++) { 
     deleteButton = "<button type='button' style='height:22px;width:20px;'" + 
      " class='deleteRowButton' title='Delete' onclick=deleteRow(" + 
      ids[i] + ")></button>"; 
     $this.jqGrid('setRowData', ids[i], { DeleteButton: deleteButton }); 
    } 
    $(".deleteRowButton").button({ 
     icons: { 
      primary: 'ui-icon-trash' 
     }, 
     text: false 
    }); 
} 

看到the first demo。

上述方法的性能存在小問題。使用setRowData您可以在頁面上進行更改。頁面上的每個更改都會重新計算頁面中存在的所有其他元素的位置。所以爲了提高性能，建議減少網格上的更改數量。所以更好的方法是使用custom formattrer。新版本的代碼幾乎和前一版本一樣簡單。你只需要定義formatter的功能：

{ name: 'DeleteButton', width: 20, 
    formatter: function (cellvalue, options) { 
     return "<button type='button' class='deleteRowButton' " + 
      "style='height: 22px;width: 20px;' title='Delete'></button>"; 
    }}, 

和gridComplete或loadComplete代碼減少

gridComplete: function() { 
    $(".deleteRowButton").button({ 
     icons: { 
      primary: 'ui-icon-trash' 
     }, 
     text: false 
    }).click(function (e) { 
     var $tr = $(e.target).closest("tr.jqgrow"); 
     alert("the row with id=" + $tr.attr("id") + " need be deleted"); 
    }); 
} 

在你原來的代碼的方法deleteRow必須全球（應該定義頂級）。新代碼只能使用click事件處理程序。請參閱the next demo。

順便說一句，你不需要綁定每個<button>到click事件處理程序。衆所周知，如果按鈕上沒有click事件處理程序，event bubbling將發生。因此，不是每次裝入和重新加載網格時綁定click事件處理程序，都可以在整個網格體上定義一次對應的事件處理程序。換句話說，你可以使用onCellSelect回調。用法非常舒適，因爲rowid和單擊單元格列的索引已經計算出來。此外，根據onCellSelect回調的第4個參數e，您可以訪問事件處理程序，其中e.tagret是點擊的<button>的DOM元素。所以，你可以替換的gridComplete上面的代碼下面的代碼：

onCellSelect: function (rowid, iCol, cellcontent, e) { 
    if ($(e.target).closest("button.deleteRowButton").length > 0) { 
     alert("the row with id=" + rowid + " need be deleted"); 
    } 
}, 
gridComplete: function() { 
    $(".deleteRowButton").button({ 
     icons: { 
      primary: 'ui-icon-trash' 
     }, 
     text: false 
    }); 
} 

的方式，你可以進一步提高性能和降低一點點用於頁的內存。 The demo顯示最後的代碼。在大多數情況下，你不需要使用像$(e.target).closest("button.deleteRowButton").length > 0這樣的結構。而不是你可以驗證列索引iCol。如果你需要，你可以測試列名。您可以使用

$(this).jqGrid("getGridParam", "colModel")[iCol].name 

到iCol轉換爲相應的列名。

Answer 2

我建議從'按鈕'切換到'輸入類型='按鈕'' 您應該可以使用CSS中的背景圖像設置圖標。您的網格功能齊全會是這個樣子：

gridComplete: function() {  
var ids = $("#myGrid").jqGrid('getDataIDs');  
for (var i = 0; i < ids.length; i++) {  
    var deleteButton = "<input type='button' class='HasIcon' style='height: 22px;width: 20px;' title='Delete' onclick=deleteRow(" + ids[i] + ")/>";  
    $("#myGrid").jqGrid('setRowData', ids[i], { DeleteButton: deleteButton });  
}  

}

和你的CSS是這樣的：

#myGrid input[type=button].HasIcon 
{ 
    background-image: url(/* icon location */); 
    background-repeat: no-repeat; 
    text-align: center; 
    padding-left: 20px; /* slightly longer than your icon */ 
} 

你不需要使用jQuery應用圖標，因爲CSS會爲你做到這一點。 CSS的魔力再次勝利！ :-)