jquery - JQuery网格过滤器菜单消失在模态后面
问题描述
我有一个显示网格的网页。我想向用户提供有关网格中某些行的详细信息，并在还包含网格的弹出窗口（模式）中显示结果。一切看起来都很好，只是模式中网格中的弹出过滤器菜单消失在模式后面。为了说明这一点，我修改了一个 jqxgrid 演示页面并添加了一个按钮，以在具有完全相同功能的模式窗口中显示内容。
我包括了整页以便于复制。您可能需要调整包含“css”和脚本文件的路径。“Demo.js”是——据我所知——“generatedata.js”的新版本。
我还在模态中设置了网格的高度，以使正在发生的事情可视化。
我希望有人可以帮助我，或者解释这不起作用或显示一些解决方法或解决方案。
谢谢
<html lang="en">
<head>
<title id='Description'>This example illustrates the Grid filtering feature. Move the mouse cursor over a column header and click the dropdown button to open the filtering menu.</title>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="scripts/demos.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var theme = getDemoTheme();
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'productname',
type: 'string'
},
{
name: 'date',
type: 'date'
},
{
name: 'quantity',
type: 'number'
},
{
name: 'price',
type: 'number'
}
],
datatype: "array"
};
var addfilter = function() {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = 'Beate';
var filtercondition = 'contains';
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtervalue = 'Andrew';
filtercondition = 'starts_with';
var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');
}
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 670,
source: adapter,
theme: theme,
filterable: true,
sortable: true,
ready: function() {
addfilter();
},
autoshowfiltericon: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
},
{
text: 'Last Name',
datafield: 'lastname',
width: 90
},
{
text: 'Product',
datafield: 'productname',
width: 170
},
{
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
},
{
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
},
{
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}
]
});
$('#events').jqxPanel({
width: 300,
height: 80,
theme: theme
});
$("#jqxgrid").on("filter", function(event) {
$("#events").jqxPanel('clearcontent');
var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
var eventData = "Triggered 'filter' event";
for (i = 0; i < filterinfo.length; i++) {
var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
$('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
}
});
$('#clearfilteringbutton').jqxButton({
height: 25,
theme: theme
});
$('#filterbackground').jqxCheckBox({
checked: true,
height: 25,
theme: theme
});
$('#filtericons').jqxCheckBox({
checked: false,
height: 25,
theme: theme
});
// clear the filtering.
$('#clearfilteringbutton').click(function() {
$("#jqxgrid").jqxGrid('clearfilters');
});
// show/hide filter background
$('#filterbackground').on('change', function(event) {
$("#jqxgrid").jqxGrid({
showfiltercolumnbackground: event.args.checked
});
});
// show/hide filter icons
$('#filtericons').on('change', function(event) {
$("#jqxgrid").jqxGrid({
autoshowfiltericon: !event.args.checked
});
});
});
function viewSubgridModalWithFilter(title) {
$("#jqxgridModal").remove();
$("#jqxgridmodalContainer").append('<div id="jqxgridModal" ></div>');
$("#gridmodalTitle").html(title);
var theme = getDemoTheme();
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'productname',
type: 'string'
},
{
name: 'date',
type: 'date'
},
{
name: 'quantity',
type: 'number'
},
{
name: 'price',
type: 'number'
}
],
datatype: "array"
};
var addfilter = function() {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = 'Beate';
var filtercondition = 'contains';
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtervalue = 'P';
filtercondition = 'starts_with';
var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$("#jqxgridModal").jqxGrid('addfilter', 'firstname', filtergroup);
// apply the filters.
$("#jqxgridModal").jqxGrid('applyfilters');
}
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgridModal").jqxGrid({
width: 670,
height: 100,
source: adapter,
theme: theme,
filterable: true,
sortable: true,
ready: function() {
addfilter();
},
autoshowfiltericon: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
},
{
text: 'Last Name',
datafield: 'lastname',
width: 90
},
{
text: 'Product',
datafield: 'productname',
width: 170
},
{
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
},
{
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
},
{
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}
]
});
$('#eventsM').jqxPanel({
width: 300,
height: 80,
theme: theme
});
$("#jqxgridModal").on("filter", function(event) {
$("#eventsM").jqxPanel('clearcontent');
var filterinfo = $("#jqxgridModal").jqxGrid('getfilterinformation');
var eventData = "Triggered 'filter' event";
for (i = 0; i < filterinfo.length; i++) {
var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
$('#eventsM').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
}
});
$('#clearfilteringbuttonM').jqxButton({
height: 25,
theme: theme
});
$('#filterbackgroundM').jqxCheckBox({
checked: true,
height: 25,
theme: theme
});
$('#filtericonsM').jqxCheckBox({
checked: false,
height: 25,
theme: theme
});
// clear the filtering.
$('#clearfilteringbuttonM').click(function() {
$("#jqxgridModal").jqxGrid('clearfilters');
});
// show/hide filter background
$('#filterbackgroundM').on('change', function(event) {
$("#jqxgridModal").jqxGrid({
showfiltercolumnbackground: event.args.checked
});
});
// show/hide filter icons
$('#filtericonsM').on('change', function(event) {
$("#jqxgridModal").jqxGrid({
autoshowfiltericon: !event.args.checked
});
});
$("#startSubgridModal").modal({
backdrop: "static"
});
}
</script>
</head>
<body class='default'>
<div class="modal fade" role="dialog" id="startSubgridModal">
<div class="modal-dialog" id="subgrid_dialog" style="width:90%;">
<!-- Modal content-->
<div class="modal-content" style="height=90%;overflow-y:auto">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="gridmodalTitle">Pallets</h3>
</div>
<div style="overflow:hidden">
<div id="jqxgridmodalContainer">
<div id="jqxgridModal"></div>
</div>
</div>
<div id="eventslogM" style="margin-top: 10px;">
<div style="width: 200px; float: left; margin-right: 10px;">
<input value="Remove Filter" id="clearfilteringbuttonM" type="button" />
<div style="margin-top: 10px;" id='filterbackgroundM'>Filter Background</div>
<div style="margin-top: 10px;" id='filtericonsM'>Show All Filter Icons</div>
</div>
<div style="float: left;">
Event Log:
<div style="border: none;" id="eventsM">
</div>
</div>
<input id="btnViewModalM" type="button" onclick="viewSubgridModalWithFilter('Grid modal')" value="Show modal" />
</div>
</div>
</div>
</div>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
<div id="eventslog" style="margin-top: 30px;">
<div style="width: 200px; float: left; margin-right: 10px;">
<input value="Remove Filter" id="clearfilteringbutton" type="button" />
<div style="margin-top: 10px;" id='filterbackground'>Filter Background</div>
<div style="margin-top: 10px;" id='filtericons'>Show All Filter Icons</div>
</div>
<div style="float: left;">
Event Log:
<div style="border: none;" id="events">
</div>
</div>
<input id="btnViewModal" type="button" onclick="viewSubgridModalWithFilter('Grid modal')" value="Show modal" />
</div>
</div>
</body>
</html>
解决方案
推荐阅读
- java - 多个一对一自引用关系的 JPA 注释
- python - 如何迭代列表python
- ios - 如何将Object参数数组快速传递给Alamofire
- blazor - NavigateTo 不会立即显示新页面
- python - 我应该从 Python 运行单个并行化 C 脚本还是运行一组并行的串行 C 脚本？
- android-room - RoomDB 是否支持 dropAllTables() 和 createAllTables()？
- python - 确定 pandas Dataframe 中的列是否包含 DATE 或 DATETIME 信息的最简单方法
- lua - 在 Lua 中使用“\”操作 sting 时出错
- android - Android模拟器确实出现了，但它只显示黑屏
- javascript - 将带有 EventEmitter 的消息发送到 observable 并从 observable 订阅发送消息 EventEmitter next，而不是销毁