[jQuery & jQgrid] 화면 Resize에 따른 jQgrid 갱신

jQgrid를 사용할 때 화면이 변경되면 그리드의 영역도 갱신을 해야 됩니다.

 

그래서 보통 $(window).bind(‘resize’, function() {~~~~}).trigger(‘resize’); 방식을 많이 쓰게 됩니다.

여기서 문제점은 명확한 갱신 시점이 없기 때문에 약간의 텀을 둬서 그리드 갱신을 할 필요가 있습니다.

 

검색을 하는 중 멋진 방법이 있어서 같이 공유하고자 합니다.

var resizeTimer;
 
var resizeGrid = function() {
  if (grid = $('.ui-jqgrid-btable:visible')) {
    grid.each(function(index) {
      gridId = $(this).attr('id');
      gridParentWidth = $('#gbox_' + gridId).parent().width();
      $('#' + gridId).setGridWidth(gridParentWidth, true);
    });
  }
};
 
(function($, window, document, undefined) {
  $(window).bind('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeGrid, 100);
  }).trigger('resize');
});