Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 22 Next »

UI 유형

ICE4에서 만들 수 있는 테이블 리스트는 총 6가지 유형으로 구분된다.

1. Basic List

기본적인 테이블 리스트는 Title, Table, Pagination, Checkbox, Event Buttons로 구성한다.

2. Search Form

검색 기능이 있는 테이블로 Fiter, Form 2가지 검색 타입을 제공한다.

필드 검색 타입 : 검색바, 테이블 필드 검색 기능 제공

폼 검색 타입 : 검색바, 폼 형태의 검색 필드 제공

3. Draggable Table

드래그 정렬 기능을 제공하는 테이블이다. Drag&Drop으로 Row데이터 위치를 변경하면, OrderNo 또한 함께 변경된다. 단, 드래그 테이블은 Search, Pagination 기능과 함께 사용 할 수 없다.

4. Editable Form

테이블 데이터를 바로 수정할 수 있도록 에디트 기능이 추가된 테이블이다.

5. Grouping Form

테이블 필드를 그룹핑 할 수 있는 테이블이다.

6. Summary Form

테이블 하단에 필드별 합계 정보를 출력해주는 테이블이다.

셋팅 옵션

BackOffice Builder의 TableList > Setting > [Option] 설정을 통해 테이블 리스트 유형과 스타일을 변경한다.

Create

기본 테이블 리스트를 생성한 뒤, 옵션 설정으로 원하는 유형을 만들 수 있다.

1. Table : NodeType

Target NodeType을 선택하면, 해당 노드에 셋팅되어 있는 Enable List Fields 목록이 출력된다. 테이블에 넣고자 하는 Value를 선택하여 테이블 리스트를 생성한다.

2. Buttons

Enable List Events 목록에서 테이블 내에서 필요한 기본 버튼을 선택하여 생성한다.

  • Create : 테이블 필드에 데이터를 등록

  • Read : 테이블에 등록 된 데이터를 상세 조회

  • Update : 변경 내용을 저장하고 업데이트

  • Delete : 테이블에 등록 된 데이터를 삭제

  • List : 상위 목록 페이지로 돌아가는 기능

3. Extra Buttons

테이블 내에 사용 할 버튼이 필요하다면, Extra Buttons을 ON으로 설정한다.

※ Create Extra Buttons

Use Extra Buttons을 ON으로 설정한다.

①번 추가하기 아이콘을 클릭하면 ②번 버튼 컴포넌트 설정 영역이 하단에 출력된다.

③번 버튼 컴포넌트를 선택하면 ④번 옵션 설정이 하단에 출력된다. (버튼 목록/설정: Buttons)

⑤번 [저장]버튼을 클릭하면, 아래와 같이 Extra Button이 생성된 것을 확인 할 수 있다.

3. Search

Show Search를 ON하면 ①~③번 옵션이 아래와 같이 출력된다.

  • Search Type : 테이블 필드에서 바로 검색하는 필터형과 검색 폼 타입 제공

  • Search Cache : 검색 이력을 Cache에 저장하는 기능

  • Search Fields : 검색바에 들어갈 필터 옵션을 선택하여 설정

NEED CHECK Search Cache : 검색바에는 캐시가 남지 않음, 폼 형태 일 경우에만 사용하는지 확인 필요

검색 타입을 Form으로 선택하면, 아래와 같이 ④~⑥번 옵션이 추가된다.

  • Realtime Search : 검색폼 설정과 동시에 테이블에 검색 결과가 실시간으로 출력

  • Search Form Fields : 폼 형태로 출력 할 필드를 선택

  • 삭제예정 Search Form Button

4. Grouping

5. Summary

Options

1. Title

Show Title 토글버튼을 ON으로 설정하면, Title 입력 필드가 나타나 테이블명을 작성 할 수 있다.

Setting

Result

2. Size

Setting

Result

3. Border

Setting

Result

  1. Event Button

  2. Sort

  3. Search: Bar, Form

  4. Pagination

  5. Filter: Select, Checkbox

  6. Table: Title, Show Summary, Click Event, Table Button, Toggle, Mouse Over Menu

  7. Icon: Edit, Delete, Status, setting, upload, download, media, etc

  8. summary graph (up/down)

  9. Label

  10. Tag

  11. Link

  12. Custom View


테이블 액션 참고: https://blog.naver.com/clay1987/221402213506

  • No labels