Question

我有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

    });
});

Answer 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使用上述代码。

Answer 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');
                                }
                            }
                        }
                    }
                },

Answer 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"]或其他内容。

如何将jqGrid的编辑形式的位置设置为窗口的中心

3 个答案: