#GWC UI Library : Grid

웹 UI 라이브러리인 GWC에서 제공하는 Grid 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

#grid {
    width: 500px;
    height: 300px;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    grid.columns = [
        { name: "NO" },
        { name: "이름" },
        { name: "나이" },
        { name: "주소" },
        { name: "회사" },
        { name: "기타" }
    ];

    grid.data = [
        { values: ["1", "김영희", "30", "경기도 양평군", "초록마을", "온화하며 삶에 대한 여운을 느낄줄 아는 사람"] },
        { values: ["2", "홍길동", "40", "전라남도 여수시", "혜민당", "실존 인물을 모델로하여 쓰여진 소설의 주인공"] },
        { values: ["3", "심청", "15", "제주도", "임당수", "아버지의 눈을 낫게하기 위해 희생을 하는 계획 있는 효녀"] },
        ....
    ];

    grid.fixFirstColumn = true;

    grid.addEventListener("columnclick", (event) => {
        const v = grid.getColumn(event.detail.index).name;
        gwcMessage(`컬럼명: ${v}`);
    });

    grid.addEventListener("dataclick", (event) => {
        const v = grid.getData(event.detail.row, event.detail.column);
        gwcMessage(`데이터: ${v}`);
    });
};

실행 결과는 다음과 같습니다.

다음은 크기 조절과 이동이 가능한 Card 컴포넌트와 함께 사용된 예제입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    _flex-direction: column;
    gap: 1em;
}

#grid {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    margin: 3px;
}

gwc-card {
    left: 100px;
    top: 100px;
    width: 500px;
    height: 300px;
}

js 코드에 반드시 다음 코드를 추가해 줘야 합니다.

GeoServiceWebComponentManager.instance.update();