Question

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

但是第三次按“查找记录”按钮，过滤器表单出现在对话框表格后面。有关原因/解决方案的任何想法 - 以便过滤器窗体始终出现在网格和对话框的前面？感谢...

<!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>

Answer 1

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

从

更改您的代码

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

到

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

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

Answer 2

但如果对话框不需要模态怎么办？有没有办法改变搜索表单的z-index？

Answer 3

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

我的解决方案是在搜索中创建一个额外的jquery UI对话框，并删除jqGrid提供的默认搜索。这应该与后面的任何jqueryui对话框完美配合，因为弹出窗口使用JqueryUI本身，忽略'modal'选项为true或false。

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

希望这有帮助。

如何防止JQgrid的搜索过滤器在jqueryUI对话框后面打开？

3 个答案: