창크기에 따라 jqgrid width 조정하기

jQgrid 기본예제에서 보면.. 

html 에 

<table id="grid"></table>

<div id="pager"></div>

이렇게 예제가 되어 있다. 

이부분을 우선 

<div id="grid_container">

<table id="grid"></table>

<div id="pager"></div>

</div>

이런식으로 밖에 레이어로 감싼다. 

이유는 jqgrid 가 들어갈 영역의 width 값을 감싼 레이어의 width 값을 사용하기 위해서.

그리고, javascript 에  아래 내용을 추가

  resizeJqGridWidth('grid', 'grid_container', $('#grid_container').width(), true);

  /*

  * @param string grid_id 사이즈를 변경할 그리드의 아이디

  * @param string div_id 그리드의 사이즈의 기준을 제시할 div 의 아이디

  * @param string width 그리드의 초기화 width 사이즈

   * @param boolean tf 그리드의 리사이즈 여부(true/false)

  */

  function resizeJqGridWidth(grid_id, div_id, width, tf){

     // window에 resize 이벤트를 바인딩 한다. 

     $(window).bind('resize', function() {

     var resizeWidth = $('#grid_container').width()-33; //jQuery-ui의 padding 설정 및 border-width값때문에 넘치는 걸 빼줌.

         // 그리드의 width 초기화

         $('#' + grid_id).setGridWidth( resizeWidth, tf);

         // 그리드의 width를 div 에 맞춰서 적용

         $('#' + grid_id).setGridWidth( resizeWidth , tf); //Resized to new width as per window. 

      }).trigger('resize');

  }

위에선 width 조정이었는데. height 도 당연히 같은 방식으로 적용 가능.

[출처] 창크기에 따라 jqgrid width 조정하기|작성자 스컬프