组合模态显示在错误的位置

时间:2015-05-20 03:37:51

标签: jquery html free-jqgrid jquery-ui-layout

当我从triand-jqGrid 4.6.0移动到free-jqGrid 4.8.0时,形成了(Screenshot 1)

这是因为我的jqGrid位于带有position: absolute; z-index: 0;的div内部,因此当编辑模式在jqGrid的gbox div内呈现并且覆盖被附加到主体上时z-index规则将对话框置于覆盖下。通过从jqGrid.src.js中撤消此change可以很容易地纠正此错误(这意味着当我单击编辑按钮时,编辑表单显示在网格内部但在html中会附加在主体上)。

然而,当我在gitHub(即将推出的jqGrid 4.9.0)中尝试了最新的代码时,编队对话框的渲染似乎已经改变了。因为当我修改jqGrid.src.js(将toTop设置为true)时,表单编辑对话框会在浏览器的左上角呈现(Screenshot 2)

这是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
);

position: absolute;是约束,因为它是由jQuery UI Layout

添加的

是否有一个特定的设置可以让jqGrid 4.9.0再次与jQuery ui Layout兼容?

更新

预期输出 enter image description here

1 个答案:

答案 0 :(得分:1)

我在免费的jqGrid中创建了some changes。我希望所有描述的问题都得到解决。 $.jgrid.jqModal.toTop的默认选项现在是true,就像之前一样,但是关闭和警告对话框后所有对话框都会被销毁(如果没有行,请点击编辑/删除按钮navGrid警告已选中)将仅在显示之前直接创建。