重装时jqgrid宽度增加问题

时间:2013-09-16 13:14:44

标签: jquery jqgrid

我正在按一下按钮重新加载JQGrid,但每次点击时,它的宽度都会增加并放置水平滚动条。如果重新加载,我如何将宽度固定为浏览器宽度的100%。 这是我的代码

    jQuery("#enhDg").jqGrid({
    url:"/ItLabourEffort/effort/grid/enhView",
    datatype: "json",
    colNames:['Customer/Capibility Name','Completed-FYTD','In Progress','In Queue','Customer'],
    colModel:[
        {name:'capabilityName',index:'capabilityName' ,width:'500',summaryType:'count', summaryTpl : 'Total Count:  {0}', align: 'center'},
        {name:'completedFYTD',index:'completedFYTD', align:'center', sorttype:'number',summaryType:'sum' ,width:'300'},
        {name:'inProgress',index:'inProgress', align:'center',sorttype:'number',summaryType:'sum',width:'300'},
        {name:'queue',index:'queue', align:'center',width:'250',summaryType:'sum'},
        {name:'customerName',index:'customerName' ,width:'550',summaryType:'count'}

    ],
    rowNum: 10,
    rowList:[10,20,30],
    height:$("#container").height(),
    sortname: 'invdate',
    viewrecords: true,
    width: '100%',
    sortorder: "desc",
    caption:"Enhancement Forecast View",
    grouping: true,
    groupingView : {
        groupField : ['customerName'],
        groupColumnShow : [true],
        groupText : ['<b>{0}</b>'],
        groupCollapse : false,
        loadonce:true,
        groupOrder: ['asc'],
        groupSummary : [true],
        showSummaryOnHide: true,
        groupDataSorted : true
    },
    footerrow: true,
    userDataOnFooter: true,

});
jQuery("#enhDg").jqGrid('navGrid','#enhDg',{add:false,edit:false,del:false});
jQuery("#enhDg").jqGrid('hideCol','customerName');
$('#timeSelectorRadio input[type=radio]').change(function() {
    jQuery("#enhDg").jqGrid().setGridParam(
            {
                datatype:'json', 
                url : "/ItLabourEffort/effort/grid/enhView2"
            }
        ).trigger("reloadGrid");
    jQuery("#enhDg").jqGrid('hideCol','customerName');

    });

1 个答案:

答案 0 :(得分:0)

更改宽度:'100%',宽度:自动,然后尝试此

$(window).bind('resize', function() {
    $("#enhDg").setGridWidth($('#grid_container').width() - 30, true);
}).trigger('resize');

你的html可能看起来像

<div id="grid_container" style="width: 100%;">
<table id="enhDg">
    <tr>
        <td />
    </tr>
</table>
<div id="pager"></div>
</div>

如果这有帮助,请告诉我。