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

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位置.它允许相对于窗口,文档,另一个元素(例如相对于网格)设置元素的位置.例如,您可以使用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"
        });
    }
});

更新:演示使用上面的代码.