jqgrid bs4。自定义按钮错位

Question

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

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

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

这是代码：

 $("#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"));
        });
}

Answer 1

class class="fa fa-undo fa-stack-2x" 和 class= "fa fa-lock fa-stack-1x pt-1" 是绝对定位导致的。通过删除 class.

的绝对位置来修复它

jqgrid bs4。自定义按钮错位

jqgrid bs4. custom button misplaced

javascript

jqgrid