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

Posted 2021-04-19

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?

请看这个演示qazxsw poi

我想在对齐中心的错误模式

https://jsfiddle.net/dnfk8hmr/178/

答案

您写的是添加内联记录。内联编辑意味着编辑jqGrid中的字段。在表单编辑的情况下将使用模态窗口。你真的需要使用什么编辑模式？

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

enter image description here

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

更新：如果你想将对话框放在窗口的中间而不是网格的中间，如果你还包括CSS的jQuery UI JS文件，那么代码可以是以下

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

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