2013-09-16 2 views
1

Я перезагружаю JQGrid нажатием кнопки, но при каждом нажатии его ширина увеличивается и помещает горизонтальную полосу прокрутки. Как я могу исправить ширину до 100% ширины браузера, даже если его перезагрузка. Вот мой кодjqgrid width увеличить проблему при перезагрузке

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

    }); 

ответ

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> 

Позвольте мне знаю, если это поможет.

+0

Спасибо за ваш ответ, он работает, но теперь он добавляет горизонтальную полосу прокрутки в JQgrid. Он улучшается, как в предыдущем случае, он выходил из окна браузера и добавлял полосу прокрутки в браузере. – gunjan

+0

@gunjan Добро пожаловать. Удалите параметры ширины из вашей модели. Какой браузер вы работаете? Если это ** chrome **, будет горизонтальная полоса прокрутки по умолчанию, но вы можете скрыть css, приведенную ниже в вашем html-файле. 'th.ui-th-column div { \t white-space: normal! important; \t высота: авто! Важное; \t обивка: 2шт; } .ui-jqgrid tr.jqgrow td { \t white-space: normal! Important; \t высота: авто; \t vertical-align: text-top; \t padding-top: 2px; } ' –

+0

Спасибо, я использую Chrome, но хотел бы видеть то же поведение в Safari, IE и firefox. Хотя выше CSS работает. – gunjan

Смежные вопросы