jqGrid

Question

我正在使用免费的 jqgrid 4.9.2

单击 toolbar/toppager 中的 Add/Edit 对话框时，对话框出现在屏幕的一角而不是 screen/page 的中心。

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

//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 - Add/Edit 对话框未与屏幕中心对齐

jqGrid - Add/Edit dialog not aligned to centre of the screen

free-jqgrid