Question

我正在使用free-jqgrid 4.9.2

单击toolbar / 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);
}

jqGrid - 添加/编辑对话框未对齐到屏幕中心

1 个答案: