2

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

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

4

2 回答 2

4

我想你的代码$(".deleteRowButton").button({icons: {primary: 'ui-icon-trash'}, text: false});没有工作，因为你把它放在了错误的地方。如果您创建<button class='deleteRowButton' ...>内部，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
    });
}

见第一个演示。

上述方法的性能存在一个小问题。使用setRowData您在页面上进行更改。页面上的每一次更改都会重新计算页面上所有其他元素的位置。因此，为了提高性能，建议减少网格上的更改次数。所以更好的方法是使用自定义 formattrer。新版本的代码实际上将与前一个版本一样简单。您只需要定义formatter为函数：

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

并减少gridCompleteorloadComplete的代码

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事件处理程序。请参阅下一个演示。

顺便说一句，您实际上并不需要将每个绑定<button>到click事件处理程序。众所周知，如果click按钮上没有事件处理程序，则会发生事件冒泡。click因此，不必每次在加载和重新加载网格时绑定事件处理程序，只需在整个网格体上定义一次相应的事件处理程序即可。换句话说，您可以使用onCellSelect回调。使用起来很舒服，因为rowid点击单元格的列的和索引已经计算过了。此外，根据回调的第 4 个参数e，onCellSelect您可以访问事件处理程序，其中e.tagret是 clicked 的 DOM 元素<button>。所以你可以替换上面的代码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).closest("button.deleteRowButton").length > 0. 取而代之的是，您只需验证列 index iCol。如果需要，您可以改为测试列名。您可以使用

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

将 转换iCol为相应的列名。

于 2012-10-19T16:03:08.540 回答
1

我建议从 '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 的魔力再次大获全胜！:-)

于 2012-10-19T14:50:39.070 回答