jqGrid - диалоговое окно добавления/редактирования не выровнено по центру экрана

Я использую бесплатную 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";
      }

    });
  }
});


jqgrid free-jqgrid
person Sundar    schedule 27.09.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы используете параметры top: 75, left: 350 и beforeShowForm, которые изменяют положение диалогового окна перед его отображением. Вместо этого я бы посоветовал вам использовать более простой способ и использовать позицию пользовательского интерфейса jQuery внутри afterShowForm. соответствующий обратный вызов может выглядеть следующим образом

afterShowForm: function($form) {
    setTimeout(function () {
        $form.closest(".ui-jqdialog").closest(".ui-jqdialog").position({
            my: 'center',
            at: 'center',
            of: window
        });
    }, 50);
}
person Oleg    schedule 28.09.2015
comment
Большое спасибо, и я все еще перевариваю ваш ответ на мой другой пост. :) - person Sundar; 28.09.2015