javascript - 如何结合其他属性在jqgrid中设置编辑表单位置和大小

Question

如何在指定的位置和大小创建可以在运行时更改的jqgrid编辑表单？编辑窗口位置应与 navGrid 中的其他编辑参数结合使用。

我尝试了下面的代码，但没有出现警告框，并且编辑表单显示在默认位置。

var oldJqDnRstop,
  editWindowParams = { 
          left: 10,
          width: window.innerWidth-18,
          top: 5,
          height: 100
          };

if ($.jqDnR) {
    oldJqDnRstop = $.jqDnR.stop; // save original function
    $.jqDnR.stop = function (e) {
        var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id"), position;
        oldJqDnRstop.call(this, e); // call original function
        if (typeof dialogId !== "string") {
            return;
        }
        if (dialogId.substr(0, 11) === "editmodgrid") {
            editWindowParams.width = $dialog.width();
            position = $dialog.position();
            editWindowParams.left = position.left;
            editWindowParams.top = position.top;
        }
    };
}


        $.extend($.jgrid.edit, {
          closeAfterAdd: true,
          recreateForm: true,
          reloadAfterSubmit: false,
          left: 10,
          dataheight: '100%',
          width: window.innerWidth-18
        });



     $grid.jqGrid("navGrid", "#grid_toppager", { edit: true }, 
      { 
       top: function() { alert(editWindowParams.top); return editWindowParams.top; },
       left: function() { return editWindowParams.left; },
       width: function() { return editWindowParams.width; },
       height: function() { return editWindowParams.height; },

            afterSubmit: function (response, postdata) { 
              if (response.responseText.charAt(0) === '{') {
                var json = $.parseJSON(response.responseText);
                return [true, '', json.Id];
                }
              alert( decodeErrorMessage(response.responseText, '', ''));
              return [false, decodeErrorMessage(response.responseText, '', ''), null];
              },

            beforeShowForm: function ($form) {
              $("#tr_Info>td:eq(1)").attr("colspan", "2"); 
              $("#tr_Info>td:eq(1)>textarea").css("width", "95%"); 
              $("#tr_Info>td:eq(0)").hide(); 
              $("#tr_Markused>td:eq(1)").attr("colspan", "2"); 
              $("#tr_Markused>td:eq(1)>textarea").css("width", "95%"); 
              $("#tr_Markused>td:eq(0)").hide(); 
              beforeShowForm_base($form);
              },


            url: '/Edit',
            closeAfterEdit: true,
            onClose: function(){ 
              $( ".ui-autocomplete-input").trigger("blur");
            } 

       } );

Answer 1

The demo演示固定代码。它是对 my previous answer 的演示的修改。它使用以下代码:

if ($.jqDnR) {
    oldJqDnRstop = $.jqDnR.stop; // save original function
    $.jqDnR.stop = function (e) {
        var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id"),
            position, $form;

        oldJqDnRstop.call(this, e); // call original function
        if (typeof dialogId === "string") {
            if (dialogId.substr(0,14) === "searchmodfbox_") {
                // save the dialog position here
                searchParams.width = $dialog.width();
                position = $dialog.position();
                searchParams.left = Math.max(0, position.left);
                searchParams.top = Math.max(0, position.top);
            } else if (dialogId.substr(0,7) === "editmod") {
                // Add or Edit form
                editParams.width = $dialog.width();
                position = $dialog.position();
                editParams.left = Math.max(0, position.left);
                editParams.top = Math.max(0, position.top);
                $form = $dialog.find("form.FormGrid");
                if ($form.length > 0) {
                    editParams.dataheight = $form.height();
                }
                editParams.height = $dialog.height();
            } else if (dialogId.substr(0,6) === "delmod") {
                // Delete form
            }
        }
    };
}