形成编辑模式显示在错误的位置
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 内呈现并且叠加层附加在 body z-index 规则将对话框置于叠加层之下。通过从 jqGrid.src.js 撤消此 change 可以轻松纠正此错误(这意味着当我单击编辑按钮时,编辑表单显示在网格内,但在 html 中它附加在body).
然而,当我尝试 gitHub 中的最新代码(即将推出的 jqGrid 4.9.0)时,形成编辑对话框的呈现似乎已经改变。因为当我修改 jqGrid.src.js(将 toTop 设置为 true)时,表单编辑对话框会呈现在浏览器的左上角
这是 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 布局兼容?
更新:
预期输出
我在免费的 jqGrid 中制作了 some changes。我希望所有描述的问题都得到解决。 $.jgrid.jqModal.toTop
的默认选项现在像以前一样是 true
,但是所有对话框将在关闭和警告对话框后被销毁(如果单击 Edit/Delete 按钮,navGrid
会发出警告未选择任何行)将仅在显示之前直接创建。
当我从 triand-jqGrid 4.6.0 移动到 free-jqGrid 4.8.0 时,编辑坏了
这是因为我的 jqGrid 位于 div 和 position: absolute; z-index: 0;
内,所以当编辑模式在 jqGrid 的 gbox div 内呈现并且叠加层附加在 body z-index 规则将对话框置于叠加层之下。通过从 jqGrid.src.js 撤消此 change 可以轻松纠正此错误(这意味着当我单击编辑按钮时,编辑表单显示在网格内,但在 html 中它附加在body).
然而,当我尝试 gitHub 中的最新代码(即将推出的 jqGrid 4.9.0)时,形成编辑对话框的呈现似乎已经改变。因为当我修改 jqGrid.src.js(将 toTop 设置为 true)时,表单编辑对话框会呈现在浏览器的左上角
这是 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 布局兼容?
更新:
预期输出
我在免费的 jqGrid 中制作了 some changes。我希望所有描述的问题都得到解决。 $.jgrid.jqModal.toTop
的默认选项现在像以前一样是 true
,但是所有对话框将在关闭和警告对话框后被销毁(如果单击 Edit/Delete 按钮,navGrid
会发出警告未选择任何行)将仅在显示之前直接创建。