주요 콘텐츠로 건너뛰기

데이터 작업하기

초기 데이터 로딩​

Kanban을 설정할 때 columns, cards, rows, links에 대한 시작 데이터를 전달할 수 있습니다.

const columns = [ // 컬럼 데이터
    {
        label: "Backlog",
        id: "backlog"
    },
    {
        label: "In progress",
        id: "inprogress"
    },
    {
        label: "Testing",
        id: "testing"
    },
    {...}
];

const cards = [ // 카드 데이터
    {
        id: 1,
        label: "Integration with React",
        priority: 1,
        color: "#65D3B3",
        description: "Some description...",

        start_date: new Date("01/05/2021"),
        end_date: new Date("01/15/2021"),

        progress: 25,
        users: [1,2,3,4],
        sprint: "1.0",
        column: "backlog",
        type: "feature",
        css: "red",
        votes: [4,6,9],
        comments: [
            {
                id: 1,
                userId: 9,
                cardId: 6,
                text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays.",
                date: new Date(),
            },{...}
        ]
    },
    {
        id: 2,
        label: "Archive the cards/boards ",
        priority: 2,
        color: "#FFC975",

        start_date: new Date("01/05/2021"),
        end_date: new Date("01/15/2021"),

        sprint: "1.0",
        column: "backlog",
        type: "feature"
    },
    {
        label: "Searching and filtering",
        priority: 1,
        color: "#65D3B3",

        start_date: new Date("01/05/2021"),

        sprint: "1.2",
        column: "backlog",
        type: "task"
    },
    {
        label: "Set the tasks priorities",
        priority: 2,
        color: "#58C3FE",

        sprint: "1.2",
        column: "inprogress",
        type: "feature"
    },
    {...}
];

const rows = [ // 행 데이터
    {
        label: "Feature",
        id: "feature"
    },
    {
        label: "Task",
        id: "task",
        collapsed: true
    },
    {...}
];

const links = [
    {
        id: "link_1",
        masterId: 1,
        slaveId: 2,
        relation: "relatesTo",
    },
    {...}
];

// 컬럼, 카드, 행에 대한 초기 데이터를 사용해 Kanban 초기화
new kanban.Kanban("#root", {
    columns, 
    cards, 
    rows,
    links 
});

로컬 소스에서 데이터 불러오기​

columns, rows, cards 데이터를 로컬 소스에서 불러오기 위해 parse() 메서드를 사용할 수 있습니다. 필요한 데이터를 포함한 객체만 전달하면 됩니다.

const board = new kanban.Kanban("#root", {});

// Kanban에 데이터 로딩
board.parse({ columns, cards, rows });

Kanban 데이터를 Gantt 및 Scheduler와 동기화하기​

아래는 Kanban 데이터를 Gantt 및 Scheduler와 같은 다른 DHTMLX 위젯과 동기화하는 예제입니다:

Kanban 데이터 가져오기​

Kanban 데이터를 얻기 위한 여러 메서드가 있습니다:

  • getAreaCards() - 특정 컬럼(및 행)의 모든 카드 데이터 객체 배열 반환
  • getCard() - 카드 ID로 카드 데이터 객체 반환
  • serialize() - Kanban 데이터를 JSON으로 직렬화

Kanban 상태 가져오기​

Kanban의 상태를 확인하려면 다음 메서드들을 사용할 수 있습니다:

Kanban 데이터 내보내기​

Kanban 데이터를 내보내려면 아래를 사용할 수 있습니다:

새 항목 추가하기​

새 cards, columns, rows는 아래 메서드로 생성할 수 있습니다:

항목 수정하기​

cards, columns, rows를 수정해야 한다면 다음 메서드를 사용할 수 있습니다:

항목 삭제하기​

cards, columns, rows를 삭제하려면 아래 메서드를 사용할 수 있습니다:

항목 이동하기​

cards, columns, rows의 위치를 변경하려면 다음 메서드를 사용할 수 있습니다:

  • moveCard() - 카드를 특정 컬럼 및 행으로 이동
  • moveColumn() - 컬럼을 원하는 위치로 이동
  • moveRow() - 행을 원하는 위치로 이동

예제​

아래는 Kanban API를 사용해 데이터를 관리하는 방법을 보여주는 코드 스니펫입니다: