주요 콘텐츠로 건너뛰기

데이터 작업하기

이 가이드에서는 Kanban의 데이터 작업을 다룹니다: 초기 데이터 로딩, 데이터 읽기 및 내보내기, 카드·컬럼·행·링크 수정, 댓글 및 선택 항목 관리.

초기 데이터 로딩​

Kanban을 초기화할 때, columns, cards, rows, links 속성을 통해 초기 데이터를 전달합니다.

다음 코드 스니펫은 컬럼, 카드, 행, 링크 데이터를 Kanban 생성자에 전달합니다:

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",
        source: 1,
        target: 2,
        relation: "relatesTo",
    },
    {...}
];

// 초기 데이터로 Kanban 초기화
new kanban.Kanban("#root", {
    columns, 
    cards, 
    rows,
    links 
});

로컬 소스에서 데이터 로딩​

초기화 이후에 컬럼, 행, 카드, 링크 데이터를 불러오려면 setConfig() 또는 parse()를 사용합니다:

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

// load data into Kanban
board.setConfig({ columns, cards, rows });

// or board.parse({ columns, cards, rows });

Gantt 및 Scheduler와 데이터 동기화​

멀티 위젯 통합에 대해서는 DHTMLX 위젯과의 통합을 참고하세요.

데이터 가져오기​

  • getAreaCards() — 지정한 컬럼(및 선택적으로 행)의 모든 카드 데이터 객체를 반환합니다
  • getColumnCards() — 지정한 컬럼의 모든 카드 데이터 객체를 반환합니다
  • getCard() — ID로 카드 데이터 객체를 반환합니다
  • serialize() — Kanban 데이터를 JSON 객체로 반환합니다

상태 가져오기​

데이터 내보내기​

  • export.json() — Kanban 데이터를 JSON 파일로 다운로드합니다

새 항목 추가​

항목 업데이트​

항목 삭제​

항목 이동​

  • moveCard() — 카드를 대상 컬럼과 행으로 이동합니다
  • moveColumn() — 컬럼을 새 위치로 이동합니다
  • moveRow() — 행을 새 위치로 이동합니다

댓글 관리​

링크 관리​

  • addLink() — 카드 간에 새 링크를 추가합니다
  • deleteLink() — ID로 링크를 삭제합니다

카드 선택 관리​

예제​

다음 스니펫은 Kanban API를 사용하여 런타임에 데이터를 조작하는 방법을 보여줍니다:

Need more help?Contact Support