웹 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();
