jqgrid自动宽度和缩小以适合不完全拟合

时间:2014-08-18 13:50:12

标签: javascript jquery html jqgrid

我创建了一个页面,可以在页面加载时将许多网格加载到页面中。我们的想法是,当页面加载时,所有网格都需要调整宽度以适应页面的宽度。对于页面加载时可见的 1网格,这可以完美,使用以下选项:

    shrinkToFit: true,
    autowidth: true,

enter image description here

请注意,列完全匹配,并且不显示水平滚动条。使用上述相同选项加载到屏幕隐藏区域的所有其他网格无法正确加载:

enter image description here

我试图通过使用方法手动设置宽度来解决此问题,使用setGridWidth,将隐藏网格的宽度设置为第1个网格的宽度,这是正确的宽度。使用此方法,隐藏网格的宽度是正确的,但是shrinkToFit选项没有正确设置列的宽度,请参见此处:

enter image description here

虽然网格看起来几乎正确,但您可以看到列宽不正确,因此水平滚动条会显示出来。当我得到加载许多子网格的网格时,这成为一个更大的问题。它变得一团糟:

enter image description here

水平滚动条占用太多空间,我希望shrinkToFit能够正常工作,它会非常干净整洁。

我希望我能够很好地解释这个问题,有没有人知道如何让shrinkToFit选项正常工作,即使这些网格被加载到页面的隐藏区域?谢谢!

修改

以下是subgrids定义的代码。你可以看到我最后使用setGridWidth

    ...
    subGrid: true,
    subGridOptions: {
        "plusicon"  : "ui-icon-triangle-1-e",
        "minusicon" : "ui-icon-triangle-1-s",
        "openicon"  : "ui-icon-arrowreturn-1-e",
        // load the subgrid data only once
        // and the just show/hide
        "reloadOnExpand" : true,
        // select the row when the expand column is clicked
        "selectOnExpand" : true
    },
    subGridRowExpanded: function(subgrid_id, row_id) {
        var subgrid_table_id, pager_id;
        subgrid_table_id = subgrid_id+"_t";
        var po_num =  jQuery('#po_list').jqGrid ('getCell', row_id, 'po_num');
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table></div>");
        jQuery("#"+subgrid_table_id).jqGrid({
            url:"/phpAJAX/Master/master_grid_v1.php",
            datatype: "xml",
            shrinkToFit: true,
            autowidth: true,
            mtype: 'POST',
            postData:{
                arg1:'pos',
                po_num:po_num
            },
            colNames:[
                'Row ID',
                ...
            ],
            colModel:[
                {width:20,name:'row_id', index:'row_id',editable:false,hidden:true},
                ...
            ],
            loadonce:true,
            pager: pager_id,
            sortname: 'row_id',
            sortorder: "asc",
            height: '100%'
        }).setGridWidth($("#inv_list").width()*.95);
    }

0 个答案:

没有答案