​

2. 스프레드 컨테이너를 생성한 다음 GanttSheet 유형의 시트 탭을 추가합니다.

3. DataManager 메소드를 사용하여 데이터 관리자를 초기화합니다.

SpreadJS의 새로운 DataManager는 서버 측(에 요청을 보낸 다음 데이터가 준비되면, 데이터를 쉽고 빠르게 GanttSheet에 바인딩하는 것을 도와주는 강력한 로컬 데이터 엔진입니다. 

4. addTable 메소드를 사용하여 데이터 관리자에 테이블을 추가합니다. 이 메소드는 테이블 이름을 문자열로 받아들이고 IDataSourceOption 인터페이스 옵션을 사용합니다.

참고: 데이터는 GanttSheet와 관련이 있으므로 batch(배치모드)를 사용하여 저장해야 합니다. 

5. 데이터 소스 구조를 기반으로 필요한 계층 구조 스키마를 정의합니다.

SpreadJS 간트시트에서 계층 구조를 표현할 수 있는 데이터 구조는 3가지로 정의할 수 있습니다. (자세히 알아보기)

• Parent: 상위의 부모ID를 통해 계층 표현 
• Level: 각 작업의 레벨 숫자의 크기에 따라서 계층 표현
• ChildrenPath: JSON의 객체(Object) 배열 구조에 맞추어서 계층 표현

이번 예제에는 대표적으로 게시판과 같은 계층 구조에서 많이 사용하는 Parent(부모ID)를 기반으로 설명합니다.

샘플 JSON

아래와 같이 샘플 JSON 데이터에는 "id(작업고유id)"와 "parentId(부모작업id)"를 가지고 있습니다. 

실제 사용하는 JSON 데이터 상의 계층 구조 표현을 위한 "이름(name)" 변수가 반드시 "id"와 "parentId"일 필요는 없습니다.

대신, 아래 코드에서 처럼, JSON데이터 상에서 어떤 값(Value)를 Parent(부모) 값으로 사용하여 계층 구조가 표현될 것인지 설정을 해주면 됩니다.

6. addView 메소드를 사용하여 Data Manager의 테이블에 뷰를 추가하고 열 정보를 정의하여 간트 시트에 어떤 정보를 보여줄지 설정합니다.

7. Data Manager(데이터 관리자) 테이블의 fetch 메소드를 사용하여 데이터를 가져온 다음, BindGanttView 메소드를 사용하여 가져온 뷰를 간트 시트에 바인딩합니다.

위 단계에 따라 완성된 샘플은 아래에서 확인하실 수 있습니다.

* 아래는 실제 SpreadJS의 간트시트(GanttSheet)를 구현한 화면 입니다. 아래 HTML/JS 탭을 통해서 소스코드를 확인할 수 있습니다. 

참고: 간트시트(GanttSheet) 데이터 스키마 종류

SpreadJS의 간트시트(GanttSheet)에서 계층 구조를 표현할 수 있는 데이터 소스의 스키마(Schema)는 Parent, Level, ChildrenPath 3가지로 정의할 수 있습니다.

GanttSheet 기능을 위해 JSON 데이터 구조를 설계할 때 아래의 3가지 중 하나를 고려하여 구조를 만들어 서버로 부터 데이터를 가져오는 것 권장합니다.

• Parent: 상위의 부모ID를 통해 계층 표현 
• Level: 각 작업의 레벨 숫자의 크기에 따라서 계층 표현
• ChildrenPath: JSON의 객체 구조에 맞추어서 계층 표현

각 계층의 JSON 데이터 예시와 SpreadJS에서 각 데이터에 따른 계층 구조 표현을 위한  Schema 설정 코드는 아래와 같습니다.

Parent 계층 구조

대표적으로 게시판과 같은 하위 댓글과 같은 계층 구조에서 많이 사용하는 Parent(부모ID)를 기반으로 데이터 구조를 설계하여 간트(Gantt)에서 작업(Task) 간의 부모/자식 관계를 표현할 수 있습니다.

[JSON 데이터 샘플]

id는 "작업 고유의 id 값"을 나타내며, parentId는 "부모 작업의 고유 id 값"을 나타냅니다.

[SpeadJS 스키마(Schema) 세팅]

아래와 같이 SpreadJS의 DataManager에 Table을 추가하고 해당 테이블을 schema 속성을 Parenet로 설정해주면, 부모ID 값을 기반으로 계층을 표현합니다.

• type: "Parenet"       // 계층 구조를 Parent 값으로 그리겠다는 속성 설정
• column: "parentId"  // JSON데이터의 "parentId" 값이 부모ID라고 매칭

[결과화면]

Level 계층 구조

​레벨 값을 기반으로 데이터 구조를 설계하여 간트(Gantt)에서 작업(Task) 사이의 계층을 표현할 수 있습니다. 

[JSON 데이터 샘플]

level은 각 작업의 레벨 값을 나타냅니다. 

레벨 값이 낮을 수록 상위 작업, 높을수록 하위 작업을 표현 합니다. 동일한 레벨 일 경우, 동일한 계층의 작업입니다.

[
    {
        "taskNumber": 1,
        "name": "Plan for Project Server 2013 deployment",
        "duration": "7 days",
        "predecessors": "",
        "level": 1,
        "resource": 1,
        "cost": 100
    },
    {
        "taskNumber": 2,
        "name": "Prepare for deployment",
        "duration": "1 days",
        "predecessors": "1",
        "level": 2,
        "resource": null,
        "cost": null
    },
    ....
]

[SpeadJS 스키마(Schema) 세팅]

아래와 같이 SpreadJS의 DataManager에 Table을 추가하고 해당 테이블을 schema 속성을 Level로 설정해주면, 레벨 값을 기반으로 계층을 표현합니다.

• type: "Level"          // 계층 구조를 레벨 값으로 그리겠다는 속성 설정
• column: "level"     // JSON 데이터의 "level" 값을 기반으로 레벨 설정

  var myTable1 = dataManager.addTable("myTable1", {
    batch: true,
    remote: {
      read: {
        url: "https://developer.mescius.com/spreadjs/demos/server/api/Gantt_level"
      }
    },
    schema: {
      hierarchy: {
        type: "Level",
        column: "level"
      }
    }
  });

[결과화면]

ChildrenPath 계층 구조

객체 내의 ChildrenPath(JSON Object 배열)를 기반으로 데이터 구조를 설계하여 간트(Gantt)에서 작업(Task) 사이의 계층을 표현할 수 있습니다.

[JSON 데이터 샘플]

아래 샘플에서 children은 해당 작업의 하위 작업 객체(Object)를 나타냅니다. 

[
    {
        "taskNumber": 1,
        "name": "Plan for Project Server 2013 deployment",
        "duration": "7 days",
        "predecessors": "",
        "resource": 1,
        "cost": 100
    },
    {
        "taskNumber": 2,
        "name": "Prepare for deployment",
        "duration": "1 days",
        "predecessors": "1",
        "resource": null,
        "cost": null,
        "children": [
            {
                "taskNumber": 3,
                "name": "Create users and groups in the Active Directory service",
                "duration": "1 day",
                "predecessors": "",
                "resource": 1,
                "cost": 200
            },
            {
                "taskNumber": 4,
                "name": "Configure SQL Server and Analysis Services",
                "duration": "3 days",
                "predecessors": "3",
                "resource": null,
                "cost": null,
                "children": [
                    {
                        "taskNumber": 5,
                        "name": "Configure SQL Server network settings",
                        "duration": "1 day",
                        "predecessors": "",
                        "resource": 1,
                        "cost": 350
                    },
            ....
    }
]

[SpeadJS 스키마(Schema) 세팅]

아래와 같이 SpreadJS의 DataManager에 Table을 추가하고 해당 테이블을 schema 속성을 Childrenpath로 설정해주면, JSON 데이터의 구조를 기반으로 계층을 표현합니다.

• type: "ChildrenPath"  // 계층 구조를 children 객체를 기준으로 그리겠다는 속성 설정
• column: "children"    // JSON 데이터의 "children"라는 이름의 객체를 하위 작업으로 지정

  var myTable1 = dataManager.addTable("myTable1", {
    batch: true,
    remote: {
      read: {
        url: "https://developer.mescius.com/spreadjs/demos/server/api/Gantt_Children"
      }
    },
    schema: {
      hierarchy: {
        type: "ChildrenPath",
        column: "children"
      }
    }
  });

[결과화면]

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ