그리드 사이즈를 브라우저 화면을 늘리고 줄임에 따라 유동적으로 변경하는 예제이다.

 


최초 크기다 다른 창을 띄우는 것도 포함한다.

 

설명은 주석으로 대체한다.

 



 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
$(document).ready(function() {
    // 그리드 셋팅(설정)이 끝나고 아래 함수 호출 (lodeComplete 이 아님)
    // 그리드 리사이즈
    gridResize("jqGrid"); // window resize에 등록
    setGridResize("jqGrid"); // 최초 그리드 사이즈 조정
});
 
/* 
 * 그리드 리사이즈 셋팅
   - GridParam 중 width 관련한 값 (autowidth, width) 는 주석처리
   
 * 주의사항
   - gridResize 함수 중 $("#cont").width() 부분은 그리드가 그려질 div 너비를 가져오는 것임...
   - setGroupHeaders 를 설정 할 경우 리사이즈 오작동함 (setGroupHeaders 를 사용하지 않으면 정상작동함, 아래 주석 무시)
    - colModel에 resizeble:false를 설정하거나, resizableFlag 변수에 false를 대입,
    - shrinkFlag 를 false로 설정해서 리사이즈 대신 박스만 리사이즈하고 내부 스크롤생성방법으로 변경
 */
 
//그리드 리사이즈
var maxGridWidth = ""// popup 사용 불가, contents가 그려지는 div 크기
var minGridWidth = 0// 최소 그리드 사이즈
var preWindowWidth = 0// 이전 창 크기
var shrinkFlag = true// true : 사이즈조정, false : 사이즈고정, 스크롤 생성
 
function setGridResize(gridId) {
    //   maxGridWidth = $("#cont").width()-2; // popup 사용 불가, contents가 그려지는 div 크기
    //          minGridWidth = $('#gbox_'+gridId).width();
 
    var windowWidth = $(window).width(); // 창크기
    var newGridWidth = windowWidth - 2// 그리드의 새로운 width
 
    //   var ol = $("#cont").offset().left; // popup 사용 불가, contents가 그려지는 div 위치
    //   var gridWidth = $('#gbox_'+gridId).width(); // 현재 그리드 박스 크기
    //   var changeWidth = preWindowWidth - windowWidth; // 변경된 창의 값 (키우면 음수, 줄이면 양수)
 
    // 그리드에 적용할 width가 최대크기보다 작고 and 그리드에 적용할 width가 최소 크기보다 크고
    if (maxGridWidth > newGridWidth && minGridWidth < newGridWidth) {
        $('#' + gridId).setGridWidth(newGridWidth, shrinkFlag);
    }
 
    // 그리드가 최대크기보다 크거나 같을 경우
    if (maxGridWidth <= newGridWidth) {
        $('#' + gridId).setGridWidth(maxGridWidth, shrinkFlag); // 기본 사이즈로 초기화
    }
 
    // 그리드가 최소크기보다 작거나 같을 경우
    if (minGridWidth >= newGridWidth) {
        $('#' + gridId).setGridWidth(minGridWidth, shrinkFlag); // 최소 사이즈로 초기화
    }
 
    preWindowWidth = windowWidth; // 현재 사이즈를 저장
}
 
function gridResize(gridId) {
    maxGridWidth = $("#cont").width() - 2// popup 사용 불가, contents가 그려지는 div 크기
    minGridWidth = $('#gbox_' + gridId).width();
 
    $(window).resize(function() {
        setGridResize(gridId);
    });
}
cs

 

도움이 되셨다면 공감을 부탁드립니다. ^^  

by 개발자 CofS 2016.01.05 14:24