샘플 포럼 지원
문서
StartViews

Available only in PRO Edition

Grid View

이 뷰는 Scheduler PRO 버전에만 포함되어 있습니다.

Grid 뷰는 다가오는 이벤트 목록을 보여주며, Agenda 뷰와 달리 원하는 만큼의 컬럼을 설정할 수 있습니다.

Related sample:  Grid view

초기화

스케줄러에 Grid 뷰를 추가하려면 다음 단계를 따르세요:

  1. 페이지에서 "grid view" 확장 기능을 활성화하세요: 
    scheduler.plugins({
    grid_view: true
});
  2. 뷰의 탭을 스케줄러 마크업에 추가하세요: 
    <div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       ...
       <div class="dhx_cal_tab" name="grid_tab" style="right:300px;"></div>
    </div>
    ... 
</div>
  3. 탭의 라벨을 설정하세요: 
    //'grid_tab'은 div의 이름입니다
scheduler.locale.labels.grid_tab = "Grid";
  4. createGridView 메서드를 호출하세요: 
    scheduler.createGridView({
    name:"grid",
    fields:[    // 그리드의 컬럼 정의
        {id:"id",   label:'Id',   sort:'int',  width:80,  align:'right'},
        {id:"date", label:'Date', sort:'date', width:'*'},
        {id:"text", label:'Text', sort:'str',  width:200, align:'left'}
    ],
    from:new Date(2019, 3, 10),//허용된 날짜 범위의 왼쪽 경계
    to:new Date(2019, 5, 23)    //허용된 날짜 범위의 오른쪽 경계
});

Related sample:  Grid view

날짜 범위 제한하기

이 확장 기능을 사용하면 활성 날짜를 제한할 수 있어 사용자가 지정된 범위를 벗어날 수 없습니다.

예를 들어, 2010년 1월 1일부터 2011년 1월 1일까지로 활성 날짜를 제한하려면 다음과 같이 설정합니다:

scheduler.createGridView({
    name:"grid",
    ..
    from:new Date(2019, 0, 1),
    to:new Date(2020, 0, 1)
});

네비게이션 활성화

그리드에서 버튼으로 네비게이션을 사용하려면 paging 속성을 켜기만 하면 됩니다:

scheduler.createGridView({
    name:"grid",
    ...
    paging:true
});

Related sample:  Grid view


네비게이션이 활성화되면 버튼을 클릭할 때마다 그리드가 한 달씩 앞으로 또는 뒤로 스크롤됩니다.

기본 시간 간격을 조정하려면 unit 및 step 속성을 사용하세요:

  • unit - (minute, hour, day, week, month, year) 스크롤할 때 사용할 시간 단위입니다. 기본값은 'month'입니다.
  • step - (number) 한 번에 스크롤할 단위의 수입니다. 기본값은 1입니다.
//2주씩 스크롤하기
scheduler.createGridView({
    name:"grid",
    ...
    paging:true,
    unit:"week",
    step:2
});

정렬

컬럼 헤더를 클릭하면 그리드가 어떤 컬럼을 기준으로 정렬되어 있는지와 오름차순 또는 내림차순인지 표시됩니다.
같은 헤더를 다시 클릭하면 정렬 순서가 반대로 바뀝니다.

컬럼마다 데이터 타입(숫자, 문자열, 날짜)이 다를 수 있으므로, 각 타입에 맞는 정렬 방식이 필요합니다.

이를 위해 뷰에서는 올바른 처리를 위해 3가지 정렬 타입을 지원합니다:

  1. int;
  2. date;
  3. str.

컬럼의 정렬을 활성화하고 정렬 타입을 지정하려면 sort 속성을 사용하세요.

scheduler.createGridView({
    name:"grid",
    fields:[
        {id:"date",  label:'Date', sort:'date'},
        {id:"text",  label:'Text', sort:'str'}
    ]
});

커스텀 정렬 함수

직접 정렬 로직을 사용하려면, 함수를 정의하고 sort 파라미터에 할당하세요.

이 함수는 인접한 값 쌍마다 호출되며, 1, -1, 0 중 하나를 반환해야 합니다:

  • 1 - 첫 번째 값이 두 번째 값보다 앞에 와야 할 때;
  • -1 - 두 번째 값이 첫 번째 값보다 앞에 와야 할 때;
  • 0 - 두 값이 같을 때.

다음은 일반적인 정렬 함수 예시입니다:

scheduler.createGridView({
    name:"grid",
    fields:[
        {id:"id",   label:'Id',   sort: sortById},
        {id:"text", label:'Text', sort:'str'}
    ]
});
 
function sortById(a,b){
    a = a.id;
    b = b.id;
    return a>b?1:(a<b?-1:0);
}

데이터 템플릿

기본적으로 각 컬럼은 id로 지정된 속성의 데이터를 표시합니다.

컬럼에 표시되는 내용을 커스터마이즈하고 싶다면 템플릿을 사용할 수 있습니다. 이 경우, 컬럼에는 템플릿 함수가 반환하는 데이터가 표시됩니다.

데이터 템플릿은 template 속성을 컬럼에 지정하여 할당합니다.

scheduler.createGridView({
    name:"grid",
    fields:[
      {id:"date",label:'Date',template:function(start,end,ev){return "1# "+ev.text}},
       ...
    ]
});

템플릿 함수는 3개의 파라미터를 받습니다:

  • start - 이벤트의 시작 날짜
  • end - 이벤트의 종료 날짜
  • ev - 이벤트 객체

관련 가이드

 맨 위로