Question

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', {});

LoadComplete：

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 =“ fafa-undo fa-stack-2x”和class =“ fafa-lock fa-stack-1x pt-1”的位置是绝对的，这导致了这种情况。通过删除类的绝对位置来修复它。

jqgrid bs4。自定义按钮放错了位置

1 个答案: