1

下面的代码在 JqueryUI 对话框中使用 JQgrid。当第一次按下“查找记录”按钮时，过滤器表格在网格前面显示得很好。关闭过滤器，很好。打开过滤器，很好，关闭它。

但是第三次​​按下 Find Records 按钮，过滤器窗体出现在对话框窗体的后面。关于原因/解决方案的任何想法 - 以便过滤器表单始终出现在网格和对话框的前面？谢谢...

<!doctype html>
<html lang="en">
<head>  
<meta charset="utf-8">  
<title>tabs demo</title>  

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<!-- <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script> -->
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

</head>

<body> 
<button id="opener">open the dialog</button>
<div id="dialog" title="My Test">
    <table id="MyGrid"></table>
    <div id="MyGridDiv" MyGrid>
    </div>
</div>       

<script>
$( "#dialog" ).dialog({ autoOpen: false});
$( "#opener" ).click(function() {  
$( "#dialog" ).dialog( "open" );});
</script>

<script>
jQuery("#MyGrid").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
{name:'note',index:'note', width:150, sortable:false}       
],
multiselect: true,
pager: '#MyGridDiv',  <!-- required for search dialog -->
caption: "Test"
});
var mydata = [
{id:"1",invdate:"2007-10-                01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#MyGrid").jqGrid('addRowData',i+1,mydata[i]);

<!-- Search options-->              
jQuery("#MyGrid").jqGrid('navGrid','#MyGridDiv',
{
del:false,add:false,edit:false},{},{},{},{multipleSearch:true}
);

</script>
</body>
</html>
4

3 回答 3

0

我也有类似的情况，并通过在 jquery 对话框属性中添加 modal:true 来修复。

更改您的代码

$( "#dialog" ).dialog({ autoOpen: false});

至

$( "#dialog" ).dialog({ autoOpen: false,modal:true});

请记住，如果 modal 设置为 true，则对话框将具有模态行为；页面上的其他项目将被禁用，即无法交互。模态对话框在对话框下方但在其他页面元素上方创建覆盖。

于 2013-04-04T03:19:58.423 回答
0

在某些情况下，您希望将 modals 选项设置为 true 的所有内容。

我的解决方案是创建一个额外的 jquery UI 对话框，用于搜索并删除 jqGrid 提供的默认搜索。这应该与后面的任何 jqueryui 对话框完美配合，因为弹出窗口使用 JqueryUI 本身，不管“modal”选项是真还是假。

$("#myGrid").jqGrid().navgrid("#myGridPager", {
   search:false
}).navButtonAdd("#myGridPager", {
   caption:""
   , buttonicon:"ui-icon-search"
   , onClickButton: function(){
      $("#myGridSearchDialog").dialog("open");
   }
});

希望这可以帮助。

于 2013-06-27T05:13:38.080 回答
0

但是如果对话框不需要是模态的呢？有什么方法可以改变搜索表单的 z-index 吗？

于 2013-04-05T14:48:23.947 回答