jqGrid - 그리드 너비 설정 및 스크롤바 추가

1. 그리드 너비 설정 방법    

그리드 너비를 임의로 설정하고 싶은 경우에는 width 값에 원하는 너비값(px)을 입력하면 됩니다. 하지만 너비 값을 화면의 크기에 맞게 자동으로 조정하고 싶으면 autowidth를 true로 주면 됩니다. 각 컬럼들이 그리드의 width에 맞게 컬럼헤드 너비가 자동으로 조절되게 하기 위해서는 shrinkToFit을 true로 주면 됩니다.

 

$("#gridId").jqGrid(    

  ...    

  // width : 100,    

  autowidth : true,

  shrinkToFit : true,    

  ...    

  colModel : [        

    {name: 'test', index: 'test', label: '테스트', width: 20, align: center},        

    ...
  ],
  ...
);

 

2. 그리드에 x축 스크롤바 추가    

컬럼헤드 너비를 자동 조절없이 colModel에 설정한 컬럼 너비를 유지하고 싶은 경우 autowidth : true, shrinkToFit : false로 주면 됩니다. 이 경우 각 컬럼의 너비의 합이 그리드 너비 보다 클 경우 스크롤바가 자동으로 생깁니다.

 

주의) modal팝업에 그리드를 생성할 경우, 모달팝업을 먼저 호출(show)한 이후에, 그리드 선언 및 초기화를 하셔야 그리드 너비관련 옵션들이 정상적으로 적용됩니다.

 

3. x축 스크롤바 없이 그리드 컬럼을 그리드 너비에 맞게 resize

$(window).bind("resize", function() {
    var gridId = "gridId";
    var grid = $("#gridId");

    // 그리드 넓이 설정
    grid.jqGrid("setGridWidth", $("#wrapperId").width(), true);

    // 헤더 넓이 설정
    if (grid.jqGrid("getGridParam", "groupHeader") != null

       && typeof grid.jqGrid("getGridParam", "groupHeader") == 'object') {

        // 데이터 첫번째 td 목록
        var firstTdList = $("#gview_" + gridId + " table.ui-jqgrid-btable tr.jqgfirstrow td");

        // 헤더 첫번째 th 넓이 설정
        $("#gview_" + gridId + " table.ui-jqgrid-htable tr.jqg-first-row-header th").each(function(idx) {
            $(this).css("width", firstTdList.eq(idx).css("width"));
        });
    }
}).trigger("resize");


4. 그리드 너비 반응형으로 조정하기    웹 창의 크기에 따라 그리드 너비가 유동적으로 변경하기 위해서는 아래의 예시 코드처럼 적용하면 됩니다. $(window).off("resize").on("resize", function () {
    $("#gridId").jqGrid('setGridWidth', $("#wrapperId").width());
});