作为我在这里的第一个问题，我可能做错了什么。请不要犹豫告诉我 - 我们都第一次学习:)
我的问题背景：
我有一个包含 2 个表的数据库：秤和项目。1 比例可以具有不同的与比例相关的比例(我称之为比例父级 - 比例子级的关系(。缩放子项可以有项目。规模 父母没有。
因此，我决定在网格知识的前沿工作，并为这种情况建立一个子网格：
规模父级网格。 - 子网格，每个比例父级都有比例子项。 - - 子网格，其中包含每个缩放子项的项。
工程。它做得很好：添加、编辑、自定义对话框适用于缩放父项和缩放子项。
但不适用于项目。在子网格中打开的自定义对话框(我在项目操作列中添加添加、编辑和删除作为自定义操作(在子子网格上下文中工作，这非常有限，因此它不适合并被网格行隐藏。
我附上了一个ScreenShoot，以便更好地理解我在说什么。您可以在顶部看到"缩放名称"，然后是"缩放子项的名称"，第三个子项具有"缩放项 ID"的子网格。在底部的中间是"新建项目"对话框，"比例名称网格"的底部会阻止对话框。
链接到图像，因为我太新手了，无法发布图像...http://imageshack.us/photo/my-images/703/subsubgriddialogopened.png/
现在，我的问题是：
如何避免对话框的浮动属性，使其不会隐藏在网格后面？一些研究将我带到了这个链接：Z 顺序不正确 - 如果网格位于 jquery UI 对话框中，则 jqgrid 添加/编辑屏幕会显示在后面
。这适用于标准按钮的添加、编辑和删除，但不适用于自定义对话框。
谢谢大家阅读我的问题。由于这不是代码的问题(它适用于所有问题(，我没有发布它，但如果有人认为它有助于解决问题，我会在这里添加它。
编辑：代码。
jQuery(document).ready(function(){
var $Grid_scaleParent = jQuery("#scaleOverviewList");
$Grid_scaleParent.jqGrid({
url:'/scaleoverview/scaleParentsData/',
datatype: 'json',
mtype: 'POST',
colNames:[
//Colnames is the visual name of the column, which appears at the top.
'Scale Id',
'Scale Name',
'Completed Scale',
'Childs related',
'Childs with Items related',
'Scale Actions'
],
colModel :[
//ColModel defines the columns and its names.
//Name is the key of the column. Index is needed for sorting the grid.
{name:'scaleId', index:'sPId', sortable:true, hidden:true},
{name:'scaleName', index:'sPName', sortable:true, align:'left', required: true, editable:true, edittype:'text'},
{name:'completedScale', sortable:false},
{name:'childsRelated', sortable:false},
{name:'childsItemsRelated', sortable:false},
{name:'scaleActions', sortable:false}
],
//Toppager adds the pagination to the top of the form.
toppager: true,
height: "100%",
rowNum:10,
rowList:[10,40,100],
pager: '#gridpager',
sortname: 'sPName',
sortorder: "asc",
viewrecords: true,
// Options to enable subGrid.
subGrid: true,
subGridRowExpanded: function(Grid_scaleChild, rowId_scaleParent) {
////////////////////////////////////
// Starting Scale Child SubGrid //
////////////////////////////////////
var Table_scaleChild, Pager_scaleChild;
Table_scaleChild = Grid_scaleChild+"_t";
Pager_scaleChild = "p_"+Table_scaleChild;
$('#'+Grid_scaleChild).html("<table id='"+Table_scaleChild+"' class='scroll'></table><div id='"+Pager_scaleChild+"' class='scroll'></div>");
jQuery('#'+Table_scaleChild).jqGrid({
url:'scaleoverview/scaleChildsData/'+rowId_scaleParent+'/',
datatype: "json",
mtype: 'POST',
colNames: [
'Scale Child Id',
'Scale Child Name',
'Items Related',
'Scale Child Actions'
],
colModel: [
{name:"scaleChildId",index:"sCId", sortable:true, hidden:true},
{name:"scaleChildName",index:"sCName", width:600, sortable:true, align:'left', required: true, editable:true, edittype:'text'},
{name:"itemsRelated", sortable: false, width:300},
{name:"scaleChildActions", sortable:false, width:200}
],
autowidth:false,
rowNum:20,
pager: Pager_scaleChild,
sortname: 'sCId',
sortorder: "asc",
height: '100%',
subGrid: true,
subGridRowExpanded: function(Grid_scaleItems, rowId_scaleChild) {
////////////////////////
// Starting Scale Items SubSubGrid //
////////////////////////
var Table_scaleItems, Pager_scaleItems;
Table_scaleItems = Grid_scaleItems+"_t";
Pager_scaleItems = "p_"+Table_scaleItems;
$('#'+Grid_scaleItems).html("<table id='"+Table_scaleItems+"' class='scroll'></table><div id='"+Pager_scaleItems+"' class='scroll'></div>");
jQuery('#'+Table_scaleItems).jqGrid({
url:'scaleoverview/scaleItemsData/'+rowId_scaleChild+'/',
datatype: "json",
mtype: 'POST',
colNames: [
'Scale Item Id',
'Min.Amount',
'Max.Amount',
'Percentage',
'Start Date',
'End Date',
'Scale Item Actions'
],
colModel: [
{name:"scaleItemId",index:"sIId", sortable:true},
{name:"minAmount", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"maxAmount", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"percentage", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"startDate", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"endDate", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"scaleItemActions", sortable:false, width:100}
],
autowidth:false,
rowNum:20,
pager: Pager_scaleItems,
sortname: 'sIId',
sortorder: "asc",
height: '100%',
loadComplete: function(){
//Getting the ID array of the list.
var scaleItemIds = jQuery('#'+Table_scaleItems).getDataIDs();
//Constructing action buttons.
for(var scaleItemAuxId=0;scaleItemAuxId< scaleItemIds.length;scaleItemAuxId++){
var scaleItemId = scaleItemIds[scaleItemAuxId];
//Construction of the custom option for each row.
//Note that we need to pass to the function the subGrid for the correct form construction.
var scaleItemActions = '<button class="scaleItemEdition" onclick="scaleItemEdition('' + scaleItemId + '', ''+ Table_scaleItems +'');"></button>';
//Constructing property management buttons.
scaleItemActions += '<button class="scaleItemDeletion" onclick="scaleItemDeletion('' + scaleItemId + '', ''+ Table_scaleItems +'');"></button>';
//Adding options to the Action Column
jQuery('#'+Table_scaleItems).setRowData(scaleItemIds[scaleItemAuxId],{"scaleItemActions":scaleItemActions});
}
//Construction of the visual features of the buttons.
$(".scaleItemEdition").button({
icons: {
primary: 'ui-icon-pencil'
},
text: false
});
$(".scaleItemDeletion").button({
icons: {
primary: 'ui-icon-close'
},
text: false
});
}
});
jQuery("#"+Table_scaleItems).jqGrid('navGrid',"#"+Pager_scaleItems,{edit:false,add:false,del:false}, {multipleSearch:true, overlay:false});
jQuery("#"+Table_scaleItems).navButtonAdd(Pager_scaleItems,{
caption: 'New Item',
title:'New Item',
buttonicon :'ui-icon-plus',
onClickButton:function(){
//Definition of the columns to be shown.
jQuery('#'+Table_scaleItems).jqGrid('editGridRow', 'new', {
zIndex:2000,
addCaption: 'New Item',
reloadAfterSubmit:true,
closeAfterAdd:true,
recreateForm:true,
beforeShowForm: function (form)
{
var $grid = $('#'+Table_scaleItems);
var dlgDiv = $("#editmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
url: '/scaleoverview/addItem/'+rowId_scaleChild+'/'
});
}
});
/////////////////////////////////////
// Ending Scale Items SubSubGrid //
/////////////////////////////////////
},
loadComplete: function(){
//Getting the ID array of the list.
var scaleChildIds = jQuery('#'+Table_scaleChild).getDataIDs();
//Constructing action buttons.
for(var scaleChildAuxId=0;scaleChildAuxId< scaleChildIds.length;scaleChildAuxId++){
var scaleChildId = scaleChildIds[scaleChildAuxId];
//Construction of the custom option for each row.
//Note that we need to pass to the function the subGrid for the correct form construction.
var scaleChildActions = '<button class="scaleChildEdition" onclick="scaleChildEdition('' + scaleChildId + '', ''+ Table_scaleChild +'');"></button>';
//Constructing property management buttons.
scaleChildActions += '<button class="scaleChildDeletion" onclick="scaleChildDeletion('' + scaleChildId + '', ''+ Table_scaleChild +'');"></button>';
//Adding options to the Action Column
jQuery('#'+Table_scaleChild).setRowData(scaleChildIds[scaleChildAuxId],{"scaleChildActions":scaleChildActions});
}
//Construction of the visual features of the buttons.
$(".scaleChildEdition").button({
icons: {
primary: 'ui-icon-pencil'
},
text: false
});
$(".scaleChildDeletion").button({
icons: {
primary: 'ui-icon-close'
},
text: false
});
}
});
jQuery("#"+Table_scaleChild).jqGrid('navGrid',"#"+Pager_scaleChild,{edit:false,add:false,del:false});
// SubGrid Adding Scale
jQuery("#"+Table_scaleChild).navButtonAdd(Pager_scaleChild,{
caption: 'New Child',
title:'New Child',
buttonicon :'ui-icon-plus',
onClickButton:function(){
//Definition of the columns to be shown.
jQuery('#'+Table_scaleChild).jqGrid('editGridRow', 'new', {
addCaption: 'New Child',
reloadAfterSubmit:true,
closeAfterAdd:true,
recreateForm:true,
beforeShowForm: function (form)
{
// Styling the editing form to the center of the page
var $grid = $('#'+Table_scaleChild);
var dlgDiv = $("#editmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
url: '/scaleoverview/addScale/'+rowId_scaleParent+'/'
});
}
});
//////////////////////////////////
// Ending Scale Child SubGrid //
//////////////////////////////////
},
loadComplete: function(){
//Resizing grid in order to make it 100% width.
resize_the_grid($Grid_scaleParent);
//Getting the ID array of the list.
var ids = $Grid_scaleParent.getDataIDs();
//Constructing action buttons.
for(var i=0;i< ids.length;i++){
var cl = ids[i];
//Construction of the custom option for each row.
var scaleActions = '<button class="edit" onclick="parentScaleEdition('#scaleOverviewList', '' + cl + '');"></button>';
scaleActions += '<button class="delete" onclick="parentScaleDeletion('#scaleOverviewList', '' + cl + '');"></button>';
//Construction of the custom option for new Tab and the name of the tab.
//var nameOfTheTab = jQuery('#siteOverviewList').getCell(cl,'Client') + '::' + jQuery("#siteOverviewList").getCell(cl,'Name');
//siteActions += '<button class="seeGames" onclick="createtab(''+ nameOfTheTab +'', '+ cl +');"></button>';
//Adding options to the Action Column
$Grid_scaleParent.setRowData(ids[i],{'scaleActions':scaleActions});
}
//Construction of the visual features of the buttons.
$(".edit").button(
{
text: false,
label: 'Edit Scale',
icons: {
primary: 'ui-icon-pencil',
secundary: null
}
});
$(".delete").button(
{
text: false,
label: 'Delete Scale',
icons: {
primary: 'ui-icon-close',
secundary: null
}
});
/*
$(".seeGames").button(
{
text: false,
label: 'Open tab with Games related to this Site',
icons: {
primary: 'ui-icon-folder-open',
secundary: null
}
});
*/
setHighlightedRows();
}
});
// 2 - Adding aditional options to the grid
$Grid_scaleParent.navGrid('#gridpager',{edit:false,add:false,del:false,search:false,refresh:true,cloneToTop: true},
{}, // edit options
{}, // add options
{}, //del options
{} // search options
);
// 3 - Adding a custom option to the grid.
// It is important to declare this custom button after the standard ones. Otherwise it will not appear.
$Grid_scaleParent.navButtonAdd("#gridpager",{
caption:'New Parent',
buttonicon :'ui-icon-plus',
onClickButton:function(){
$Grid_scaleParent.jqGrid('editGridRow', 'new', {
addCaption: 'New Parent',
reloadAfterSubmit:true,
closeAfterAdd:true,
recreateForm:true,
beforeShowForm: function (form)
{
// Styling the editing form to the center of the page
var $grid = $Grid_scaleParent;
var dlgDiv = $("#editmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
beforeInitData: function() {
//Redefine of the cols that need to be set for adding.
},
afterShowForm: function () {
//Redefine of the cols, so other actions will not see them.
},
url: '/scaleoverview/addScale/'
});
}
});
});
function scaleItemEdition (scaleItemId, subSubGridId)
{
//Declaring subGrid in which the form has to be inserted.
var $subSubGrid = jQuery('#'+subSubGridId);
$subSubGrid.jqGrid('editGridRow', scaleItemId, {
editCaption:'Edit Scale Item',
beforeShowForm: function(form)
{
// Styling the editing form to the center of the page
var $grid = $subSubGrid;
var dlgDiv = $("#editmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
width:400,
recreateForm:true,
reloadAfterSubmit:true,
closeAfterEdit:true,
url:'/scaleoverview/scaleItemEdition'
});
resize_the_grid(jQuery('#scaleOverviewList'));
}
function scaleItemDeletion (scaleItemId, subSubGridId)
{
//Declaring subGrid in which the form has to be inserted.
var $subSubGrid = jQuery('#'+subSubGridId);
$subSubGrid.jqGrid('delGridRow', scaleItemId,
{
caption:'Delete Scale Item',
msg:'Delete this Scale Item.',
beforeShowForm: function(form)
{
// Styling the editing form to the center of the page
var $grid = $subSubGrid;
var dlgDiv = $("#delmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
reloadAfterSubmit:true,
url:'/scaleoverview/scaleItemDeletion'
});
}
欢迎来到堆栈溢出！没有屏幕短片，很难理解您的问题。这和试图在不品尝的情况下了解某道菜的口感大致相同。你也不会发布任何JavaScript代码。该代码可以帮助理解您如何创建"自定义对话框"，该对话框将与 jqGrid 一起显示不好。
尽管如此，如果您认为问题是对话框的错误 z 顺序，您可能可以轻松解决问题。例如，如果你使用jQuery UI对话框，你应该添加zIndex选项。如果手动创建自定义对话框<div>则必须将"z-Index"添加到div 的样式中。重要的是div必须具有absolute，relative或fixed值为position。通常，对话使用position: absolute。
我仍在与这个问题作斗争。我帖子中的图像可以帮助理解它(它是指向 imageshack 的链接，因为我无权上传图像(。
发现问题出在 Overflow： auto 类 '.ui-jqgrid .ui-jqgrid-bdiv' 上。尝试使用Firebug避免该行，然后所有对话框在所有网格上"飞行"，这正是我想要的。
然而，这更像是一个HACK而不是一个解决方案，所以我仍然在寻找一个正确的答案。jqGrid 中必须有一个选项来启用"飞行"对话框，而不是使它们隐藏在网格的限制后面。
我将把这两个链接都放在我的网格图像上。
第一张图片：对话框不在网格中飞行，因此它隐藏在网格后面。
http://imageshack.us/photo/my-images/703/subsubgriddialogopened.png/
第二张图片：对话框在网格中飞行，这就是我想要的。
http://imageshack.us/photo/my-images/221/screenshot20120503at845.png
如果需要，我可以上传更多屏幕截图。