如何将jQuery UI图标添加到动态生成的按钮? [英] How can I add a jQuery UI icon to a dynamically generated button?

问题描述

下载jQuery UI时，您会获得一个样式表，该样式表适用于所选的主题，以及包含图标的多个图像文件.我已经弄清楚了如何将图标添加到单个<button>元素，但是遇到一种情况，我正在网格(jqGrid)中动态生成按钮，并希望使用这些图标.因此，说我想从CSS文件中使用此图标:

When downloading jQuery UI you get a stylesheet for whatever theme was selected, as well as several image files containing icons. I've figured out how to add an icon to a single <button> element, but I have a situation where I'm dynamically generating buttons in a grid (jqGrid) and want to use these icons. So, say I want to use this icon from the CSS file:

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

然后，我通过处理gridComplete事件将按钮添加到网格:

Then, I add the buttons to the grid by handling the gridComplete event:

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

我尝试在button标签中使用一个类，例如deleteRowButton，然后像这样使用jQuery:

I've tried using a class in the button tag, for example, deleteRowButton, and then using jQuery like this:

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

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

But this doesn't work. What do I have to do to get my buttons to have this icon?

推荐答案

我想您的$(".deleteRowButton").button({icons: {primary: 'ui-icon-trash'}, text: false});代码无法正常工作，因为您将其放置在错误的位置.如果在gridComplete内部创建<button class='deleteRowButton' ...>，则应在发布代码之后直接在gridComplete 内部进行$(".deleteRowButton").button(...)调用.

I suppose that your code with $(".deleteRowButton").button({icons: {primary: 'ui-icon-trash'}, text: false}); didn't worked because you placed it in the wrong place. If you create the <button class='deleteRowButton' ...> inside of gridComplete you should make the call $(".deleteRowButton").button(...) also inside of gridComplete directly after the code which you posted:

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可以在页面上进行更改.页面上的所有更改都将重新计算页面上所有其他元素的位置.因此，为了提高性能，建议减少网格上的更改数量.因此，更好的方法是使用自定义格式化程序.新版本的代码实际上与上一个版本一样容易.您只需要将formatter定义为函数:

The small problem exists in the performance of the above approach. Using setRowData you make changes on the page. Every change on the page follow recalculation of positions of all other elements existing on the page. So to improve performance it's recommended to reduce the number of changes on the grid. So the better way is the usage of custom formattrer. The new version of the code will be practically exactly so easy as the previous one. You just need to define formatter as function:

{ 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必须为 global (应在顶层定义).新代码只能使用click事件处理程序.参见下一个演示.

In your original code the method deleteRow must be global (it should be defined on the top level). The new code can use just click event handler. See the next demo.

通过这种方式，您实际上不需要将每个<button>绑定到click事件处理程序.众所周知，如果按钮上没有click事件处理程序，则事件冒泡发生.因此，不必在每次加载和重新加载网格时都绑定click事件处理程序，只需在整个网格主体上定义一次相应的事件处理程序即可.换句话说，您可以使用onCellSelect回调.用法非常舒适，因为已经计算了rowid和单击单元格的列索引.此外，根据onCellSelect回调的第4个参数e，您可以访问事件处理程序，其中e.tagret是单击的<button>的DOM元素.因此，您可以将上面的gridComplete代码替换为以下代码:

By the way you don't really need to bind every <button> to click event handler. As well known if there are no click event handler on the button the event bubbling will take place. So instead of binding click event handler every time on loading and reloading of the grid one can just define once the corresponding event handler on the whole grid body. In other words you can use onCellSelect callback. the usage is very comfortable because the rowid and the index of the column of the clicked cell are already calculated. Moreover per 4-th parameter e of the onCellSelect callback you can access to the event handler where e.tagret is the DOM element of the clicked <button>. So you can replace the above code of gridComplete to the following code:

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的结构.取而代之的是，您只需验证列索引iCol.如果需要，可以改为测试列名称.您可以使用

In the way you can more improve the performance and reduce a little the memory used for the page. The demo shows the last code live. In the most cases you don't need to use constructs like $(e.target).closest("button.deleteRowButton").length > 0. Instead of that you can just verify the column index iCol. If you need you can test the column name instead. You can use

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

将iCol转换为相应的列名.

这篇关于如何将jQuery UI图标添加到动态生成的按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！