如何将 jqGrid 的编辑表单的位置设置为窗口的中心答案

【问题标题】：How to set position for Edit form of jqGrid as center of the window如何将 jqGrid 的编辑表单的位置设置为窗口的中心
【发布时间】：2014-02-25 10:10:38
【问题描述】：

我有带有编辑和添加表单的 jqGrid，问题是显示 jqGrid 的左侧，而不是窗口的中心，我尝试了不同的方式，但没有得到，这是我的代码..

$(document).ready(function () {
    jQuery("#jQGridDemo").jqGrid({
        url: 'http://localhost:52618/Sample/GetEmployeeDetails',
        datatype: "json",
        mtype: "POST",
        colNames: ['Eno', 'Ename', 'City', 'Salary', 'Address', 'Actions'],
        colModel: [
         { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true },
         { name: 'Ename', index: 'Ename', width: 150, editable: true },
         { name: 'City', index: 'City', width: 150, editable: true },
            { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true },
            { name: 'Address', index: 'Address', width: 100, height: 120, hidden: true, editable: true, editrules: { edithidden: true }, hidedlg: true },
             {
                 name: 'Actions', index: 'Actions', width: 100, height: 120, formatter: 'actions',
                 formatoptions: {
                     keys: true,
                     editformbutton: true,

                 }
             },
        ],
        rowNum: 10,
        add: true,
        addParams: { useFormatter: true },

        mtype: 'Get',
        loadonce: true,
        pager: '#jQGridDemoPager',
        viewrecords: true,
        caption: "List Employee Details",
        height: "230px",
        add: true,
    });

    jQuery("#jQGridDemo").jqGrid('navGrid', "#jQGridDemoPager", {

        add: true,
        edit: false,
        del: false

    });
});

【问题讨论】：

我尝试过不同的方式.....你也应该发布这些。
[link][1] [1]: stackoverflow.com/questions/21846860/… 这很容易制作。检查给出的链接。

标签： jquery jqgrid

【解决方案1】：

确实有很多方法可以改变添加/编辑表单在窗口中的位置。一种方法是使用jQuery UI position。它允许设置元素相对于窗口、文档、另一个元素（例如相对于网格）的位置。例如，您可以使用 beforeShowForm 或 afterShowForm 回调。要为添加和编辑对话框设置此类回调，您可以扩展 $.jgrid.edit。试试下面的代码

$.extend(true, $.jgrid.edit, {
    recreateForm: true,
    beforeShowForm: function ($form) {
        $form.closest(".ui-jqdialog").position({
            of: window, // or any other element
            my: "center center",
            at: "center center"
        });
    }
});

已更新：The demo 使用上述代码。

【讨论】：

我试过了但是不行，还有什么需要改变的吗？
@Sanjay：您确定在使用我发布的代码时出错。我在使用代码的演示中添加了 UPDATED 部分。您可以看到演示工作。

【解决方案2】：

我也有同样的需求，所以添加了top和left的属性，如下图。

{
                    name: 'Actions', index: 'Actions', width: 35, editable: false,
                    formatter: 'actions',
                    formatoptions: {
                        keys: true,
                        delbutton: false,
                        editformbutton: true,
                        editOptions: {
                            url: '/Account/EditUser',
                            width: dbWidth,
                            top: Math.max(0, ($(window).height() / 3)),
                            left: Math.max(0, ($(window).width() / 3)),
                            closeOnEscape: true,
                            afterComplete: function (response) {
                                if (response.responseText) {
                                    alert(response.responseText);
                                    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                                    if (response.responseText === "Saved Successfully")
                                        $('#cData').trigger('click');
                                }
                            }
                        }
                    }
                },

【讨论】：

【解决方案3】：

我尝试了 Oleg 的方式，但不适用于最新版本的 jqGrid 5.0.2。下一个代码对我来说很好：

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

$.jgrid.regional["ru"].edit.afterShowForm = centerjqdialog;
$.jgrid.regional["ru"].del.afterShowForm = centerjqdialog;
$.jgrid.regional["ru"].search.afterShowForm = centerjqdialog;
$.jgrid.regional["ru"].view.afterShowForm = centerjqdialog;

将代码 regional["ru"] 替换为 regional["en"] 或您喜欢的其他内容。

【讨论】：