triand-jqGrid 4.6.0 から free-jqGrid 4.8.0 に移行したときに、形成が壊れました
これは、jqGrid が div 内にあるためですposition: absolute; z-index: 0;
。編集モーダルが jqGrid の gbox div 内にレンダリングされ、オーバーレイが本体に追加されると、z-index ルールによってダイアログがオーバーレイの下に配置されます。このバグは、jqGrid.src.js からこの変更を元に戻すことで簡単に修正できました (つまり、編集ボタンをクリックすると、編集フォームがグリッド内に表示されますが、html では本文に追加されます)。
ただし、gitHub (今後の jqGrid 4.9.0) で最新のコードを試したところ、形成ダイアログのレンダリングが変更されたようです。jqGrid.src.js を変更すると (toTop を true に設定)、フォーム編集ダイアログがブラウザーの左上隅にレンダリングされるためです。
ここにJSFiddleリンクがあります
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
);
jQuery UI Layoutによって追加されるため、これposition: absolute;
は制約です
jqGrid 4.9.0 を jQuery ui Layout と再度互換性を持たせるために含めることができる特定の設定はありますか?
アップデート:
期待される出力