如何将jqGrid的Edit表单的位置设置为窗口的中心 [英] How to set position for Edit form of jqGrid as center of the window

问题描述

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

I have jqGrid with Edit and Add forms, problem is displaying left side of the jqGrid, instead of center of the window, i have tried in different ways, but not getting, here my code is..

$(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

    });
});

推荐答案

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

There are really many ways to change the position of Add/Edit form on the window. One way is the usage of jQuery UI position. It allows to to set position an element relative to the window, document, another element (for example relative to the grid). You can use beforeShowForm or afterShowForm callbacks for example. To set such callbacks for both Add and Edit dialogs you can extend $.jgrid.edit. Try the following code

$.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"
        });
    }
});

已更新:该演示使用上述代码.

这篇关于如何将jqGrid的Edit表单的位置设置为窗口的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！