如何将jqGrid的编辑forms的位置设置为窗口的中心
我有jqGrid与编辑和添加表单，问题是显示jqGrid的左侧，而不是窗口的中心，我尝试了不同的方式，但没有得到，这里我的代码是..
$(document).ready(function () { jQuery("#jQGridDemo").jqGrid({ url: 'http://localhost:52618/Sample/GetEmployeeDetails', datatype: "json", mtype: "POST", colNames: ['Eno', 'Ename', 'City', 'Salary', 'Address', 'Actions'], colModel: [ { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true }, { name: 'Ename', index: 'Ename', width: 150, editable: true }, { name: 'City', index: 'City', width: 150, editable: true }, { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true }, { name: 'Address', index: 'Address', width: 100, height: 120, hidden: true, editable: true, editrules: { edithidden: true }, hidedlg: true }, { name: 'Actions', index: 'Actions', width: 100, height: 120, formatter: 'actions', formatoptions: { keys: true, editformbutton: true, } }, ], rowNum: 10, add: true, addParams: { useFormatter: true }, mtype: 'Get', loadonce: true, pager: '#jQGridDemoPager', viewrecords: true, caption: "List Employee Details", height: "230px", add: true, }); jQuery("#jQGridDemo").jqGrid('navGrid', "#jQGridDemoPager", { add: true, edit: false, del: false }); }); 有很多方法可以在窗口上更改“添加/编辑”表单的位置。 一种方法是使用jQuery UI位置 。 它允许相对于窗口，文档，另一个元素（例如相对于网格）设置元素的位置。 例如，您可以使用beforeShowForm或afterShowForm回调。 要为“添加”和“编辑”对话框设置此类回调，可以扩展$.jgrid.edit 。 请尝试以下代码
$.extend(true, $.jgrid.edit, { recreateForm: true, beforeShowForm: function ($form) { $form.closest(".ui-jqdialog").position({ of: window, // or any other element my: "center center", at: "center center" }); } });
更新 ： 演示使用上面的代码。
我有相同的要求，所以添加了top和left的属性，如下所示。
{ name: 'Actions', index: 'Actions', width: 35, editable: false, formatter: 'actions', formatoptions: { keys: true, delbutton: false, editformbutton: true, editOptions: { url: '/Account/EditUser', width: dbWidth, top: Math.max(0, ($(window).height() / 3)), left: Math.max(0, ($(window).width() / 3)), closeOnEscape: true, afterComplete: function (response) { if (response.responseText) { alert(response.responseText); $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); if (response.responseText === "Saved Successfully") $('#cData').trigger('click'); } } } } },
我试过Oleg的方式，但是不适用于jqGrid 5.0.2的最新版本。 下一个代码对我来说很好：
function centerjqdialog($form) { $form.closest(".ui-jqdialog").position({ of: window, my: "center center", at: "center center" }); } $.jgrid.regional["ru"].edit.afterShowForm = centerjqdialog; $.jgrid.regional["ru"].del.afterShowForm = centerjqdialog; $.jgrid.regional["ru"].search.afterShowForm = centerjqdialog; $.jgrid.regional["ru"].view.afterShowForm = centerjqdialog;
代码regional["ru"]根据您的口味替换为regional["en"]或其他内容。