如何显示 info_dialog 在 jqgrid 中设置位置中心

Question

iam jqgrid ver 4.15 iam 有问题..我想添加内联记录。需要归档名称

  { name: "Name", width: 200, editable: true ,
            editrules: {required: true}
            }

我想要显示位置中心 info_dialog jqGrid 弹出模式。我使用帮助此链接和其他链接但不起作用 how to center jqGrid popup modal window?

请看这个演示https://jsfiddle.net/dnfk8hmr/178/

我想在 aling 中心使用错误模式

enter image description here

Answer 1

你写了关于添加内联记录。内联编辑意味着编辑 jqGrid 内部的字段。在 表单编辑 的情况下将使用模态 windows。您真正需要使用哪种编辑模式？

作为解决方法，我建议您将表单编辑与内联编辑结合起来。您可以使用表单编辑进行添加操作，使用内联编辑来编辑现有行。相应的代码可能看起来像

$("#grid").jqGrid({
    ...
    navOptions: {
        edit: false,
        del: false,
        search: false,
        refresh: false
    },
    inlineNavOptions: {
        add: false,
        edit: true
    },
    formEditing: {
            beforeShowForm: function ($form) {
            var $dlgDiv = $form.closest(".ui-jqdialog"),
                    dlgWidth = $dlgDiv.width(),
                dlgHeight = $dlgDiv.height(),
                dlgStyle = $dlgDiv[0].style,
                    $gridDiv = $(this).closest(".ui-jqgrid"),
                gridWidth = $gridDiv.width(),
                gridHeight = $gridDiv.height();

              // TODO: change parentWidth and parentHeight in case of the grid
              //       is larger as the browser window
              dlgStyle.top = Math.round((gridHeight - dlgHeight) / 2) + "px";
              dlgStyle.left = Math.round((gridWidth - dlgWidth) / 2) + "px";
        }
    }
}).jqGrid("filterToolbar")
        .jqGrid("navGrid")
    .jqGrid("inlineNav");

见https://jsfiddle.net/dnfk8hmr/196/

更新： 如果您想将对话框放置在 window 的中间而不是网格的中间，并且如果您包含 jQuery UI JS 文件附加到 CSS 然后代码可以是以下

formEditing: {
    afterShowForm: function ($form) {
        $form.closest(".ui-jqdialog").position({
            my: "center",
            at: "center",
            of: window
        });
    }
}

见https://jsfiddle.net/dnfk8hmr/202/

如何显示 info_dialog 在 jqgrid 中设置位置中心

how show info_dialog set postion center in jqgrid

javascript

jquery

jqgrid

free-jqgrid