组合模态显示在错误的位置 [英] formediting modals shows at wrong position

问题描述

当我从triand-jqGrid 4.6.0移动到free-jqGrid 4.8.0时，形成了

这是因为我的jqGrid位于一个div中，其中 position：absolute; z-index：0; 因此，当编辑模式在jqGrid的gbox div内呈现并且覆盖附加在主体上时，z-index规则将对话框置于覆盖下。通过从jqGrid撤消此

  jQuery（＃navgrid）。jqGrid（{
 datatype： xmlstring，
 datastr：mystr，
 colNames：['Inv No'，'Date'，'Client'，'Amount'，'Tax'，'Total'，'Closed'，'Ship via '，'注释']，
 colModel：[
 {name：'id'，index：'id'，width：55，editable：false，editoptions：{readonly：true，size：10} }，
 {name：'invdate'，index：'invdate'，width：80，editable：true，editoptions：{size：10}}，
 {name：'name'，index：' name'，width：90，editable：true，editoptions：{size：25}}，
 {name：'amount'，index：'amount'，width：60，align：right，editable：true ，editoptions：{size：10}}，
 {name：'tax ，index：'tax'，width：60，align：right，editable：true，editoptions：{size：10}}，
 {name：'total'，index：'total'，width：60 ，align：right，editable：true，editoptions：{size：10}}，
 {name：'closed'，index：'closed'，width：55，align：'center'，editable：true ，edittype：checkbox，editoptions：{value：是：否}}，
 {名称：'ship_via'，索引：'ship_via'，宽度：70，可编辑：true，编辑类型：选择 ，editoptions：{value：FE：FedEx; TN：TNT}}，
 {name：'note'，index：'note'，width：100，sortable：false，editable：true，edittype： textarea，editoptions：{rows：2，cols：20}} 
]，
 rowNum：10，
 rowList：[10,20,30]，
 pager：'＃pagernav'，
 iconSet：fontAwesome，
 cmTemplate：{autoResizable：true}，
 shrinkToFit：false，
 autoresizeOnLoad：true，
 autoResizing：{compact：true}，
 sortname：'id'，
 viewrecords：true，
 sortorder：desc，
 caption：Navigator Example，
编辑url：someurl.php，
身高：210 
}）; 
 
 jQuery（＃navgrid）。jqGrid（'navGrid'，'＃pagernav'，
 {}，// options 
 {height：280，reloadAfterSubmit：false} ，//编辑选项
 {height：280，reloadAfterSubmit：false}，//添加选项
 {reloadAfterSubmit：false}，// del options 
 {} //搜索选项
）; 
  

位置：绝对; 是一个约束因为它是由。我希望所有描述的问题都得到解决。 $。jgrid.jqModal.toTop 的默认选项现在是 true ，就像之前一样，但所有对话框都将是在关闭和警告对话框之后销毁（如果没有选择行，则单击编辑/删除按钮时按 navGrid 警告）将仅在显示之前直接创建。

When I moved from triand-jqGrid 4.6.0 to free-jqGrid 4.8.0 formediting broke

This is because my jqGrid is inside a div with position: absolute; z-index: 0; so when the edit modal is rendered inside the gbox div of the jqGrid and the overlay is appended on the body z-index rules places the dialog under the overlay. This bug was easily corrected by undoing this change from the jqGrid.src.js (This means that when I click the edit button, the edit form shows inside the grid but in the html it is appended on the body).

However, when I tried the latest codes in gitHub (the upcoming jqGrid 4.9.0) the rendering of formediting dialogs seems to have changed. because when I modify jqGrid.src.js (setting toTop to true) the form edit dialog gets rendered at the top left corner of the browser

Here is the JSFiddle link

jQuery("#navgrid").jqGrid({
  datatype: "xmlstring",
  datastr: mystr,
  colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Closed','Ship via','Notes'],
  colModel:[
    {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}},
    {name:'invdate',index:'invdate', width:80,editable:true,editoptions:{size:10}},
    {name:'name',index:'name', width:90,editable:true,editoptions:{size:25}},
    {name:'amount',index:'amount', width:60, align:"right",editable:true,editoptions:{size:10}},
    {name:'tax',index:'tax', width:60, align:"right",editable:true,editoptions:{size:10}},      
    {name:'total',index:'total', width:60,align:"right",editable:true,editoptions:{size:10}},
    {name:'closed',index:'closed',width:55,align:'center',editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}},
    {name:'ship_via',index:'ship_via',width:70, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"}},
    {name:'note',index:'note', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}      
  ],
  rowNum:10,
  rowList:[10,20,30],
  pager: '#pagernav',
  iconSet: "fontAwesome",
  cmTemplate: { autoResizable: true },
  shrinkToFit: false,
  autoresizeOnLoad: true,
  autoResizing: { compact: true },
  sortname: 'id',
  viewrecords: true,
  sortorder: "desc",
  caption:"Navigator Example",
  editurl:"someurl.php",
  height:210
});

jQuery("#navgrid").jqGrid('navGrid','#pagernav',
  {}, //options
  {height:280,reloadAfterSubmit:false}, // edit options
  {height:280,reloadAfterSubmit:false}, // add options
  {reloadAfterSubmit:false}, // del options
  {} // search options
);

The position: absolute; is a constraint because it is added by jQuery UI Layout

Is there a specific setting that I can include to make jqGrid 4.9.0 compatible with jQuery ui Layout once again?

Update:

Expected Output

解决方案

I made some changes in free jqGrid. I hope that all described problem are solved. The default option for $.jgrid.jqModal.toTop is now true like it was before, but all dialogs will be destroyed after closing and alert dialog (warning by navGrid on click on Edit/Delete button if no row are selected) will be created only directly before it will be displayed.

这篇关于组合模态显示在错误的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！