的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); 
}