jquery - 形成编辑模式显示在错误的位置

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

当我从 triand-jqGrid 4.6.0 移动到 free-jqGrid 4.8.0 时,编辑中断了 (Screenshot 1)

这是因为我的 jqGrid 位于 position: absolute; 的 div 中。 z-index: 0; 因此,当编辑模式在 jqGrid 的 gbox div 内呈现并且叠加层附加在主体上时,z-index 规则将对话框置于叠加层之下。通过撤消此操作可以轻松纠正此错误 change来自 jqGrid.src.js(这意味着当我单击编辑按钮时,编辑表单显示在网格内部,但在 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 布局兼容?

更新:

预期输出 enter image description here

最佳答案

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

关于jquery - 形成编辑模式显示在错误的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30339851/

相关文章:

javascript - 使用动画将元素从一个父元素移动到另一个父元素

javascript - 当 loadonce 设置为 true 时分页不起作用

jquery - 如果滚动到免费 jqgrid 中最右边的位置,如何同步标题和列分隔符行

jquery - AWS API 方法失败并出现 504 错误;使用 Cognito 和 CORS

javascript - GSAP 绩效和结构

javascript - 如何通过 Javascript 管理用户身份?

javascript - Meteor.loginwithpassword 在 iOS 上不起作用

javascript - 使用 jquery 和 canvas 从 html 元素 id 到另一个 html 元素画线

html - 如何强制免费 jqgrid 为搜索工具栏绘制卡住的列边框

javascript - 嵌套工具提示(工具提示内的工具提示)