Jqgrid 隐藏在栅格后面的子栅格上的自定义对话框

作为我在这里的第一个问题，我可能做错了什么。请毫不犹豫地告诉我——我们都是第一次学到：

我的问题背景：

我有一个包含两个表的数据库：Scales和Items。 1音阶可以有不同的音阶相关关系，我称之为音阶父-音阶子。 缩放子对象可以有项目。 父母不会

因此，我决定在我的知识前沿使用网格，并为这个案例建立一个子网格：

规模父母的网格。 -具有每个缩放父对象的缩放子对象的子栅格。 --带有每个比例子项的子网格

工作。它做得很好：添加、编辑、自定义对话框适用于缩放父对象和缩放子对象

但不适用于项目。在子网格中打开的自定义对话框I添加、编辑和删除作为项目操作列中的自定义操作在子网格上下文中工作，该上下文非常有限，因此它不适合并被网格行隐藏

为了更好地理解我所说的，我附上了一个截图。 您可以在顶部看到比例名称，后跟比例子项的名称，第三个子项有一个子网格，比例项Id位于顶部。 在中间的底部新建项目对话框中，用缩放名的底部网格阻挡对话框。

链接到图片，因为我太新手，无法发布图片。。。

现在，我的问题是：

如何避免对话框的浮动属性，使其不隐藏在网格后面？ 一些研究让我想到了这个链接：

…适用于标准按钮添加、编辑和删除，但不适用于自定义对话框

谢谢大家阅读我的问题。由于这不是一个问题，它的代码工作的一切，我没有张贴它，但如果有人认为这将有助于解决问题，我会添加在这里

编辑：代码

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'
});
}

---

欢迎来到stackoverflow！没有截图，你很难理解你的问题。这与不品尝某道菜就试图了解它的味道差不多。您也不会发布任何JavaScript代码。代码可以帮助您理解如何创建自定义对话框，该对话框将与jqGrid一起显示

---

然而，如果您假设问题是对话框的错误z顺序，那么您可能很容易解决问题。例如，如果您使用jQueryUI对话框，您应该添加选项。如果手动创建有关的自定义对话框，则必须添加到div的样式中。div必须具有绝对、相对或固定的位置值，这一点很重要。通常情况下，对话框使用position:absolute。

我仍在努力解决这个问题。我帖子中的图片可以帮助理解它，它是imageshack的链接，因为我没有上传图片的权利

发现问题在于溢出：类“.ui jqgrid.ui jqgrid bdiv”上的自动。 试着用Firebug避开那一行，然后所有对话框“飞”到所有网格上，这正是我想要的

然而，这与其说是一个解决方案，不如说是一个黑客，所以我仍然在寻找一个合适的答案。jqGrid中必须有一个选项来启用“飞行”对话框，而不是让它们隐藏在网格的限制后面

我将把这两个链接放到我的网格的图像上

第一幅图：对话框没有在网格中飞行，所以它被隐藏在网格后面

第二幅图：对话框在网格中飞行，这就是我想要的

---

如果需要的话，我可以上传更多的截图。

你好，奥列格先生：首先，谢谢你关于jqGrid的所有其他帖子，你以前已经帮了我很多。第二，我添加了图片作为链接，不久前编辑了帖子。这并不是关于错误的z顺序，它可以按它必须的方式工作，但问题是当它是一个子网格时，它不是一个好的行为。在去掉无用的行之后，我将把代码添加到原来的帖子中。我仍在与这个问题作斗争。我帖子中的图片可以帮助理解它，它是imageshack的链接，因为我没有上传图片的权利。