javascript - 如何在jqgrid中显示信息对话框设置位置中心

Question

iam jqgrid 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/

iam 希望在 aling 中心出现错误模态

enter image description here

Answer 1

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

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

$("#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/

更新:如果您想将对话框放置在窗口中间而不是网格中间，并且除了 CSS 之外还包含 jQuery UI JS 文件，则代码可能如下

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

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