0
私の最初の質問は、私が間違っている可能性があります。私に教えすることを躊躇しないでください - 私たちはすべての最初の時間を学ぶ:)私の問題のグリッドの背後に隠れているSub-SubGridのカスタムダイアログ
コンテキスト：スケールとアイテム：
を、私は2つのテーブルを持つデータベースを持っています。 1スケールには、異なるスケール関係（私がスケール・ペアレント - スケール・チャイルドと呼ばれる関係）を持つことができます。 スケールチャイルドにアイテムを含めることができます。 スケール親はそうではありません。
だから私は、グリッドと私の知識のフロンティアで働く、そしてこの場合のために、サブサブグリッドを構築することを決定した：スケール両親の
グリッド。 - 各スケールペアレントのスケールチャイルドを含むサブグリッド。 - - 各スケール子の項目を含むSubGrid。
作品。それは良いことです：追加、編集、カスタムダイアログは、スケールペアレントとスケールチャイルドで動作します。
しかし、アイテムのものではありません。 Sub-SubGridコンテキスト（カスタムアクションとしてAdd、Edit、DeleteをItemアクション列に追加）で開かれたカスタムダイアログはSub-SubGridコンテキストでは機能しないため、グリッド行に収まらず、非表示になります。
私が言っていることをよりよく理解するために、ScreenShootを添付しました。 上部にスケール名が表示され、次にスケールの子の名前が表示され、3番目の子に上部にスケールアイテムIDのSubSubGridが表示されます。 下部のNew Item Dialogの中央に、Scale Name Gridの下部がダイアログをブロックします。画像へ
リンクは、私はイメージを掲載する、あまりにも初心者ですと... http://imageshack.us/photo/my-images/703/subsubgriddialogopened.png/
さて、私の質問は：
それがないので、私は、ダイアログのフローティング属性を避けることができますどのようにグリッドの背後に隠れていない？ いくつかの研究は、このリンクに私をもたらした：標準のボタンを追加、編集、削除が、カスタムダイアログのために動作しないために良いです Incorrect Z-Order - the jqgrid Add/Edit screen shows up behind if you the grid is on a jquery ui dialog
...。
私の問題をお読みいただきありがとうございます。コードに問題はないので（それはすべて動作します）、私は投稿しませんでしたが、誰かが問題の解決に役立つと思った場合は、ここに追加します。
EDIT：コード。
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'
});
}
こんにちはMr.Oleg :)まず、jqGridについてのあなたの他の投稿すべてに感謝します。 2番目に、画像をリンクとして追加しました（直前の投稿を編集します）。 これは、誤ったzオーダーに関するものではなく、それがしなければならないように機能しますが、それはそのサブサブグリッドが良い動作ではないということです。無駄な行を取り除いた後、元の投稿にコードを追加します。 –
私はまだこの問題と戦っています。私の投稿の画像はそれを理解するのに役立ちます（画像をアップロードする権利がないので、imageshackへのリンクです）。 –