如何将jQuery UI图标添加到动态生成的按钮？

下载jQueryUI时，您将获得所选主题的样式表，以及包含图标的多个图像文件。我已经知道了如何将图标添加到单个

元素中，但我遇到了这样一种情况：我在网格（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 });
    }
}

---

但这不起作用。我该怎么做才能让我的按钮有这个图标？

我建议从“按钮”切换到“输入类型=“按钮”” 您应该能够使用CSS中的背景图像来设置图标。您的网格完整函数如下所示：

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

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 });    
}    

#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的魔力再次胜利！：-）

我假设您的代码带有

$（“.deleteRowButton”）.button（{icons:{primary:{ui-icon-trash'}，text:false}）不起作用，因为您将其放置在错误的位置。如果您在
gridComplete
的内部创建
则应在您发布的代码之后直接调用
$（“.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
    });
}

并将
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
必须是全局的（应该在顶层定义）。新代码可以只使用
单击
事件处理程序。看

顺便说一下，您实际上不需要将每个
绑定到
单击事件处理程序。众所周知，如果没有
单击按钮上的事件处理程序，将发生。因此，不必每次加载和重新加载网格时都绑定
单击
事件处理程序，只需在整个网格体上定义一次对应的事件处理程序即可。换句话说，您可以使用
onCellSelect
callback。使用起来非常方便，因为已经计算了
rowid
和单击单元格列的索引。此外，根据
onCellSelect
回调的第4个参数
e
，您可以访问事件处理程序，其中
e.tagret
是单击的
的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
    });
}

通过这种方式，您可以进一步提高性能，并减少一点用于页面的内存。实时显示最后一段代码。在大多数情况下，您不需要使用类似
$（e.target）.nestest（“button.deleteRowButton”）.length>0的结构。相反，您只需验证列索引
iCol
。如果需要，可以改为测试列名。你可以用

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

将
iCol
转换为相应的列名。
谢谢Frankie。由于图标实际上是包含所有图标的较大图像的一部分，我将为我的
背景图像
URL指定什么？这里有一个图标集的链接：嗯，这可能有点棘手。你需要做的是像这样指定背景偏移：背景位置：-176px-96px；嗯，但这不会缩小尺寸，因此最终会显示所有其他图标。您可能可以使用一个名为“Before”的伪选择器，但我不认为IE8/7/6会支持它，但这意味着您必须选择按钮以外的内容，因为按钮不能包含其他元素（可能锚定标记会更好）。看见
$(this).jqGrid("getGridParam", "colModel")[iCol].name