隐藏在Grid后面的Sub-SubGrid上的自定义对话框

时间:2012-05-02 07:07:49

标签: jqgrid overlay z-index subgrid

作为我在这里的第一个问题,我可能做错了什么。请不要犹豫告诉我 - 我们都是第一次学习:)

我的问题的背景:

我有一个包含2个表的数据库:Scales和Items。 1 Scale可以有不同的Scales相关(我称之为Scale Parent - Scale Childs的关系)。 Scale Childs可以有Items。 规模父母没有。

所以我决定在Grids的知识前沿工作,为这个案例建立一个Sub-SubGrid:

规模父母网格。   - 每个Scale Parent的具有Scale Childs的子网格。   - - 包含每个Scale Child的项目的SubGrid。

作品。它做得很好:添加,编辑,自定义对话框适用于Scale Parents和Scale Childs。

但不适用于物品。在Sub-SubGrid中打开的自定义对话框(我在“项目操作”列中添加“添加”,“编辑”和“删除”作为自定义操作)在Sub-SubGrid上下文中工作,该上下文非常有限,因此它不适合并被网格行隐藏。

我附上了一个ScreenShoot,以便更好地理解我所说的内容。 您可以在顶部看到比例名称,然后是比例子名称,第三个子项在顶部有一个带有比例项ID的SubSubGrid。 在New Item对话框底部的中间,Scale Name Grid的底部阻止了对话框。

链接到图片,因为我太新手发布图片了...... http://imageshack.us/photo/my-images/703/subsubgriddialogopened.png/

现在,我的问题是:

如何避免Dialog的Floating属性,因此它不会隐藏在Grid后面? 一些研究将我带到了这个链接: Incorrect Z-Order - the jqgrid Add/Edit screen shows up behind if you the grid is on a jquery ui dialog

...这对于添加,编辑和删除标准按钮很有用,但不适用于自定义对话框。

谢谢大家阅读我的问题。因为它不是代码的问题(它全部工作),我没有发布它,但是如果有人认为它有助于解决问题,我会在这里添加它。

编辑:代码。

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

2 个答案:

答案 0 :(得分:0)

欢迎来到stackoverflow!没有屏幕截图,很难理解你的问题。这与尝试理解某道菜的状态而不品尝它一样。您也不会发布任何JavaScript代码。代码可以帮助理解如何创建“自定义对话框”,它将与jqGrid一起显示不佳。

然而,如果您认为问题是对话框的错误z顺序,您可以很容易地解决问题。例如,如果您使用jQuery UI对话框,则应添加zIndex选项。如果您使用<div>手动创建自定义对话框,则必须将'z-Index'添加到div的样式中。 div必须具有absoluterelativefixedposition,这一点非常重要。通常,人们使用position: absolute作为对话框。

答案 1 :(得分:0)

我仍然在反对这个问题。我的帖子中的图片可以帮助理解它(它是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

如果需要,我可以上传更多屏幕截图。