如何防止JQgrid的搜索过滤器在jqueryUI对话框后面打开？
如何防止JQgrid的搜索过滤器在jqueryUI对话框后面打开？
提问于 2013-04-03 19:50:31
下面的代码在一个JQgrid对话框中使用JqueryUI。当第一次按下“查找记录”按钮时，过滤器表单在网格前显示得很好。关上过滤器，好的。打开过滤器，很好，把它关上。
但是在第三次按“查找记录”按钮后，过滤器表单就出现在对话框的后面。对于原因/解决方案有什么想法吗？--使过滤器表单总是出现在网格和对话框的前面？谢谢..。
<!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> 回答 3
Stack Overflow用户
发布于 2013-04-04 03:19:58
我也有类似的情况，并通过在jquery对话框属性中添加模态:true进行了修正。
将代码更改为
$( "#dialog" ).dialog({ autoOpen: false});至
$( "#dialog" ).dialog({ autoOpen: false,modal:true});请记住，如果模态设置为真，对话框将有模态行为；页面上的其他项目将被禁用，即不能与之交互。模态对话框在对话框下面创建一个覆盖，但在其他页面元素之上。
Stack Overflow用户
发布于 2013-04-05 14:48:23
但是，如果对话不需要模态呢？有没有办法改变搜索表单的z索引？
Stack Overflow用户
发布于 2013-06-27 05:13:38
有些情况下，您希望将modals选项设置为true。
我的解决方案是创建一个额外的jquery对话框，用于搜索，并删除jqGrid提供的默认搜索。这应该与后面的任何jqueryui对话框完美地工作，因为弹出时使用的是JqueryUI本身，而忽略了“模态”选项是正确的还是错误的。
$("#myGrid").jqGrid().navgrid("#myGridPager", {
search:false
}).navButtonAdd("#myGridPager", {
caption:""
, buttonicon:"ui-icon-search"
, onClickButton: function(){
$("#myGridSearchDialog").dialog("open");
}
});希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15796711
复制相关文章
相似问题
腾讯云开发者
