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});没有用，因为你把它放在了错误的地方。如果您在<button class='deleteRowButton' ...>内创建gridComplete，则应在您发布的代码后直接在$(".deleteRowButton").button(...) 内拨打gridComplete ： / p>

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和所单击单元格的列的索引。此外，对于e回调的每个第4个参数onCellSelect，您可以访问事件处理程序，其中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

我建议从'button'切换到'input type =“button”' 您应该能够使用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的神奇之处再次胜利！： - ）

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

2 个答案: