2018-09-10 개발일지

요즘에 프로젝트를 진행하는 도중에 data grid module를 맡아서 개발을 진행하고 있다.

SWIMLANE 샘플이나 데브익스트림 처럼 data가 있으면 자동으로 table을 만들어 주는 모듈을 만드는 것이다.

그 전에는 퍼플리셔 디자이너 분이 페이지 퍼플리싱을 해주시면 그 페이지를 복사해서 angular로 바꾸는 작업을 해왔었는데 이번 프로젝트에서는 그 작업 대신 예제 샘플처럼 데이타가 주어지면 모듈을 이용해 자동으로 생성되게 하는 작업을 맡게 된 것 이다.

어떻게 해야할지 감이 안잡혀서 일단 SWIMLANE 소스를 다운받아 분석 하기로 했다.

다음과 같은 component를 이용하면

<ngx-datatable class="material" [rows]="rows" columnmode="force" [headerheight]="50" [footerheight]="0" [rowheight]="50" [scrollbarv]="true" [scrollbarh]="true">
    <ngx-datatable-column name="Name" [width]="300"></ngx-datatable-column>
    <ngx-datatable-column name="Gender"></ngx-datatable-column>
    <ngx-datatable-column name="Age"></ngx-datatable-column>
    <ngx-datatable-column name="City" [width]="300" prop="address.city"></ngx-datatable-column>
    <ngx-datatable-column name="State" [width]="300" prop="address.state"></ngx-datatable-column>
</ngx-datatable>

다음의 table이 만들어진다.

<ngx-datatable> 안에  <ngx-datatable-column>이라는 directive를 줘서 column을 설정하는 것 같다.

component의 디렉터리 구조이다.  폴더를 열면 좀 더 복잡하게 되어있다.

그리고 SWIMLANE은 <table>을 사용하나고 Grid View를 사용하기 때문데 <div> 태그를 사용한다.

하지만 내가 맡은 프로젝트는 퍼플 된 페이지를 기초로하기 때문에 <table>태그를 이용해 만들어 보기로 한다.