的jqGrid - 添加/编辑对话框

Question

我使用的是免费的jqGrid 4.9.2

当单击工具栏/ toppager添加/编辑对话框，然后对话框出现的一个角落不对准屏幕中心屏幕不在屏幕/页面的中心。

我尝试了下面的代码..有什么帮助或建议吗？

//Toolbar button to add a config 
 
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', { 
 
    caption: jQuery.i18n.prop('userdetail.table.button.adduser'), 
 
    title: jQuery.i18n.prop('userdetail.table.title.add'), 
 
    buttonicon: 'fa-user-plus', 
 
    onClickButton: function() { 
 
    jQuery("#userGrid").jqGrid('editGridRow', "new", { 
 
     //Add options 
 
     height: 'auto', 
 
     width: 'auto', 
 
     top: 75, 
 
     left: 350, 
 
     modal: true, 
 
     addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'), 
 
     processData: jQuery.i18n.prop('application.common.message.processing'), 
 
     recreateForm: true, 
 
     reloadAfterSubmit: false, 
 
     closeOnEscape: true, 
 
     //checkOnUpdate:true,//Form Navigation option 
 
     //savekey: [true,13], //Form Navigation option 
 
     //navkeys: [true,38,40],//Form Navigation option 
 
     //checkOnSubmit : true,//Form Navigation option 
 
     bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'), 
 
     bSubmit: jQuery.i18n.prop('application.common.button.save'), 
 
     afterSubmit: refreshData, // Need to refresh the data in the table to reflect the primary key added to this table. 
 
     closeAfterAdd: true, 
 
     beforeShowForm: function() { 
 
     // "editmodlist" 
 
     var dlgDiv = $("#editmod" + grid[0].id); 
 
     var parentDiv = dlgDiv.parent(); 
 
     var dlgWidth = dlgDiv.width(); 
 
     var parentWidth = parentDiv.width(); 
 
     var dlgHeight = dlgDiv.height(); 
 
     var parentHeight = parentDiv.height(); 
 
     // TODO: change parentWidth and parentHeight in case of the grid 
 
     //  is larger as the browser window 
 
     dlgDiv[0].style.top = Math.round((parentHeight - dlgHeight)/2) + "px"; 
 
     dlgDiv[0].style.left = Math.round((parentWidth - dlgWidth)/2) + "px"; 
 
     } 
 

 
    }); 
 
    } 
 
});

Answer 1

您使用的top: 75, left: 350选项和beforeShowForm这改变了对话的位置它会显示之前。而不是我会建议你遵循更简单的方法，并使用afterShowForm内的jQuery UI位置。相应的回调可以如下

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