jqgrid bs4。自定义按钮错位答案

【问题标题】：jqgrid bs4. custom button misplacedjqgrid bs4。自定义按钮错位
【发布时间】：2018-11-11 03:47:44
【问题描述】：

jqgrid js v5.3.2。 styleUI='Bootstrap4'。

使用下面的网格设置和在 loadComplete() 中创建的自定义按钮，我将自定义按钮错误地放置在第二个单元格中，该单元格应该在第四个单元格中。这可能是什么原因？ TIA

通过 Edge 的开发工具查看生成的 html：

这里是代码：

 $("#grd_siteuser").jqGrid({
            url: getGridDataUrl + '?gname=grd_siteuser',
            datatype: "json",
            colModel: [
                { label: 'UId', name: 'Id', hidden: true, key: true },
                { label: 'DomainId', name: 'DomainId', hidden: true },
                { label: 'Domain', name: 'Domain', hidden: true },
                { label: 'Email', name: 'Email', width: 150, editable: true },
                { label: 'UserName', name: 'UName', width: 100, editable: true },
                {
                    label: 'Status', name: 'Status', width: 80, sortable: false, editable: true,
                    formatter: 'select', stype: 'select', edittype: 'select',
                    editoptions: { value: "false:Inactive;true:Active" }
                },
                {
                    label: ' ', name: 'act', width: 80, sortable: false, align: 'center',
                    formatoptions: { keys: false, delbutton: false, editbutton: false }, formatter: 'actions'
                }
            ],
            viewrecords: true,
            autowidth: true,
            height: 300,
            mtype: 'Get',
            rowNum: 25,
            loadonce: true,
            editurl: updateSiteUserUrl,
            pager: "#grd_siteuser_pager",
            loadComplete: siteuser.onloadcompletesiteuser,
            subGrid: true,
            subGridRowExpanded: siteuser.onsubgridexpandsiteuser
        });
        $('#grd_siteuser').navGrid('#grd_siteuser_pager', {});

加载完成：

onloadcompletesiteuser: function (data) {
    var $grid = $("#grd_siteuser");
    var icol = home.getcolidxbyname($grid, "act"); //### return 7 correctly
    $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (icol + 1) + ")")
        .each(function () {
            $("<div>", {
                title: "Reset Password",
                mouseover: function () {
                    $(this).addClass("ui-state-hover");
                },
                mouseout: function () {
                    $(this).removeClass("ui-state-hover");
                },
                click: function (e) {
                    var rid = $(e.target).closest("tr.jqgrow").attr("id");
                    var id = $grid.jqGrid("getCell", rid, "Id");
                    siteuser.resetpwd(id);
                }
            }
            ).css({ "margin-right": "5px", float: "left", cursor: "pointer" })
                .addClass("ui-pg-div ui-inline-custom")
                .append('<i class="fa fa-undo fa-stack-2x"></i><i class= "fa fa-lock fa-stack-1x pt-1" ></i>')
                .prependTo($(this).children("div"));
        });
}

【问题讨论】：

分享 jsFiddle 链接以进一步调试
@front_end_dev，不确定，我用的服务器端数据可能无法创建jsFiddle链接

标签： javascript jqgrid

【解决方案1】：

类 class="fa fa-undo fa-stack-2x" 和 class="fa fa-lock fa-stack-1x pt-1" 是绝对定位的，导致了这种情况。通过删除类的绝对位置来修复它。

【讨论】：