컬럼 정렬

dhtmlxGantt는 그리드 컬럼 내 데이터를 클라이언트 측에서 바로 정렬할 수 있는 기능을 제공합니다.
그리드에서 정렬을 활성화하는 방법은 두 가지가 있습니다:

1. sort 속성이 활성화된 컬럼 헤더를 한 번 클릭하는 방법
2. sort 메서드의 API 호출을 사용하는 방법으로, 버튼 클릭이나 페이지 로드 등 이벤트나 동작에 의해 트리거될 수 있습니다.

헤더 클릭으로 정렬하기

헤더를 클릭하면, Gantt 차트는 현재 정렬된 컬럼과 정렬 순서(오름차순 또는 내림차순)를 시각적으로 표시합니다. 같은 헤더를 연속으로 클릭하면 정렬 방향이 토글됩니다.

Gantt 차트에서 정렬을 활성화하려면, sort 속성을 true로 설정하세요:

gantt.config.sort = true; 
gantt.init("gantt_here");

Related sample:  Built-in sorting

프로그래밍 방식으로 정렬하기

버튼 클릭이나 페이지 로드 등 특정 이벤트나 동작에 따라 그리드를 정렬하려면, sort 메서드를 사용하세요.

버튼 클릭 시 정렬

<input type='button' value='Sort by task name' onclick='gantt.sort("text", true);'>
 
<script type="text/javascript" charset="utf-8">
    gantt.init("gantt_here"); 
    gantt.parse(tasks);
</script>

Related sample:  Using sorting methods

커스텀 정렬 함수

sort 메서드의 첫 번째(유일한) 파라미터로 함수명을 전달하여 커스텀 정렬 함수를 적용할 수 있습니다.

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

• 1 - 첫 번째 객체가 두 번째 객체보다 앞에 와야 함
• -1 - 두 번째 객체가 첫 번째 객체보다 앞에 와야 함
• 0 - 두 객체의 순서는 변하지 않음

Gantt 차트에서 커스텀 함수로 정렬하기

<input type='button' value='Sort by the number of holders' 
       onclick='sortByHolders(direction)'>
 
<script type="text/javascript" charset="utf-8">
    var direction = false;
 
    function sortByHolders(direction1){
        direction = !direction;
        gantt.sort(sortHolders);
    };
    function sortHolders(a,b){
         a = a.users.length;
         b = b.users.length;
 
         if (direction){
            return a>b?1:(a<b?-1:0);
         } else {
            return a>b?-1:(a<b?1:0);
         }
    };
</script>

Related sample:  Custom sorting function

그리드에서 컬럼별 정렬

각 컬럼별로 개별적인 정렬 규칙을 정의할 수 있습니다. 컬럼별 정렬을 처리하는 세 가지 일반적인 방법은 다음과 같습니다:

1) sort를 false로 설정하여 컬럼에서 정렬 비활성화

gantt.config.columns[1].sort = false;

2) sort에 커스텀 함수를 할당하여 컬럼을 커스텀 함수로 정렬

gantt.config.columns[1].sort = function(a,b){
    return custom_function(a,b);
};

이 커스텀 함수는 두 개의 작업 객체(a, b)를 받아 1, -1 또는 0을 반환합니다:

• 1 - 첫 번째 객체가 두 번째 객체보다 앞에 와야 함
• -1 - 두 번째 객체가 첫 번째 객체보다 앞에 와야 함
• 0 - 순서가 변경되지 않음

3) sort에 다른 작업 필드명을 지정하여 해당 필드 값 기준으로 컬럼 정렬

gantt.config.columns[1].sort = 'other_field';

Back to top