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 29 Next »


Basic Set

기본 테이블은 Title, Table, Pagination, Event Buttons 4가지 엘리먼트로 구성되어 있다.

 

1. 테이블 필드, 데이터

  • Target Node Type : 타겟 노드 타입

    • Enable List Fields : 테이블 필드 Value를 선택하여 테이블 생성 > List Field Instance Slot 테이블 셋팅

  • Data Sync : 연관 데이터 자동 설정

  • Use API : API 사용 여부

    • URL

    • Parameters

 

2. 테이블 타이틀

 

3. 페이지네이션

  • Show Pagination

    • Pagination Position = {Top, Bottom, Both} NEED CHECK top 적용 안됨, Default값 필요(미설정 > bottom)

    • Pagination Align = {Left, Center, Right} NEW 페이지네이션에도 정렬 기능 필요(Default = right)

    • Show Total Count

 


4. 이벤트 버튼

  • Enable List Events : 기본 5가지 버튼 중 선택하여 추가 > List Button Instance Slot 테이블 셋팅

    • Show Event Buttons

      • Event Buttons Position = {Top, Bottom, Both}

      • Event Buttons Align = {Left, Center, Right}

  • Use Extra Buttons : 추가 버튼 생성

 

 

ASIS Pagination과 Event Buttons 2가지 모두 ON일 경우, 서로 다른 라인에 배치됨

 

TBD Pagination과 Event Buttons 2가지 모두 ON일 경우, 동일 라인에 배치하는 신규 옵션 추가

  • NEW Same line align 옵션

    • [Pagination] > [Left, Center, Right] : 3가지 옵션 모두 선택 가능

    • [Event Buttons] > [Left, Center, Right] : Pagination에서 선택한 옵션 선택 불가

 

EX 백오피스 예시 화면

동일 라인 Align사용

다른 라인 Align사용

 

 


Function Set

기본 테이블에 Search, Draggable, Editable, Grouping, Summary 5가지 기능을 적용할 수 있다.

 


1. 검색

  • Show Search{ON/OFF}

    • NEW Use SearchBar{ON/OFF}

      • Enable Search Fields : 검색바에 사용할 조건 옵션 선택 > Search Field Instance Slot 테이블 셋팅

    • NEW Use Filter/Sorter{ON/OFF}

      • TOBE Search Type = {Filter/Sorter, Form Filter, Both}

        • (Form Filter)사용 > Enable Search Form Fields > Search Form Field Instance Slot 테이블 셋팅

        • (Form Filter)사용 > Search Timing = {Realtime Search, Button Search}

        • (Filter/Sorter)사용 > Show Sorter

        • (Filter/Sorter)사용 > Show Filter

    • Use Search Cache : 필드 필터와 폼검색 캐시 저장 사용

검색타입{Form Filter} 선택 시 화면

검색타입{Filter/Sorter} 선택 시 화면

 

  • Connect SearchForm : 검색 이력 저장, 동일한 검색 매개 변수가 들어 올 경우 검색

NEED CHECK Connect SearchForm{ON}설정 시

 

2번 Search Table MEMO

NEED CHECK 검색바만 사용하고 싶은 경우 설정 없음

NEED CHECK 검색 옵션 변경 필요

  • Show Search{ON/OFF}

    • NEW Use Search Bar{ON/OFF}

      • {ON}일 경우에만 Enable Search Fields 목록 출력

    • NEW Use Filter/Sorter{ON/OFF}

      • {ON}일 경우에만 Search Type 옵션 출력

        • {Form Filter}일 경우에만 Enable Search Form Fields 목록 출력

        • NEW Search Timing = {Realtime Search, Button Search}

TOBE [Search Type] ( ASIS *Search Type = {Filter, Form} )

- Filter/Sorter: 테이블 내의 Column Header에서 바로 필터/쏠팅 사용 가능

- Form Filter: 테이블 상단에 Form(?) 형태로 필터 사용

NEW [Search Timing] ( ASIS Enable Search Form Button )

- Realtime Search : 필터 선택과 동시에 실시간으로 테이블에 결과 출력

- Button Search : 필터 설정 후 [필터적용] 버튼을 클릭할 경우 테이블에 결과 출력


2. 드래그 정렬

  • Draggable{ON/OFF}

    • NEW Use Drag icon{ON/OFF}

NEED CHECK 드래그 테이블은 Search, Pagination 기능과 함께 사용 할 수 없는지 확인 필요

ANT DESIGN 사용자가 드래그 사용 가능 여부를 쉽게 알 수 있도록 icon이 추가된 2번 타입 추가 제안

또는 List Order Edit Function 옵션으로 다중칸/한칸씩 이동하는 기능 선택할 수 있도록 기능 추가

List Order Edit Function

A타입 : 드래그로 다중칸 이동 가능

B타입 : 한칸씩만 이동 가능


3. 에디팅

  • Editable{ON/OFF}

    • NEW Editable Type = {Cells, Rows}

ANT DESIGN 2가지 에디팅 기능 ( NEEDCHECK 현재 에디팅 기능 사용 불가능 )

 



4. 그룹핑

ASIS List Field Instance Slot 테이블 셋팅에서 필드 1개씩 개별 셋팅

 

TOBE 그룹핑 여러개를 한번에 확인하며 진행할 수 있는 방법 필요

  • NEW Grouping{ON/OFF}

    • NEW Group Label : 필드 그룹명 텍스트 입력

    • NEW Select Fields : 그룹핑 할 필드 선택(다중선택)

 


5. 써머리

  • Show Summary

    • Enable Summary Fields : Sum 진행 할 테이블 필드 선택

 


UI Set : Table Options

 

1. Size

2. Table Style

Bordered, Header, Colums

3. Table Style

4. Radio, Checkbox

NEED CHECK 라디오, 체크박스 기능을 선택형으로 변경 필요 > 라디오버튼

 

5. Custom ?

 

 

0. 기능 확인 불가 NEED CHECK

1. Info Icon

2. Action Display Type = {Button ,Droupdown}

 

 

 

 


Slot Set

  • List Field Instance Slot : 1-2. 테이블 필드, 데이터

  • List Button Instance Slot : 1-4. 이벤트 버튼

  • Search Field Instance Slot : 2-1. 검색과 필터 > 검색바

  • Search Form Field Instance Slot : 2-1. 검색과 필터 > 필터/쏠팅

 

 



셋팅화면


셋팅 옵션

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

<셋팅 화면 정리중> /wiki/spaces/~438538633/pages/1584758785

Create

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


1. Table : NodeType

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


2. Buttons

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

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

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

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

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

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


3. Extra Buttons

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

①번 추가하기 아이콘을 클릭하면, 하단에 버튼 추가 영역이 출력된다.

②번 버튼 컴포넌트를 선택하면, 하단에 버튼 옵션 설정 영역이 출력된다.

  • Column Label : 테이블 열에 필드명

  • Label : 버튼명 텍스트

  • Data Sync : 연관 데이터 설정 여부를 토글버튼으로 선택

③번 버튼 옵션 설정을 진행한 뒤, ④번 저장 버튼을 클릭한다. (버튼 목록/설정 참고 : Event Component)

⑤번과 같이 Extra Button이 신규 생성되어 목록에 추가 되었다.


3. Search

검색 기능을 설정하고 싶다면, Show Search를 ON으로 설정한다. ①~③번 옵션이 아래와 같이 출력된다.

  • Search Type : 테이블 필드 필터형과 검색 폼, 2가지 타입 선택 가능

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

  • Search Fields : Search Bar에 들어갈 필터 옵션 설정

검색 타입을 Form으로 선택할 경우, 아래와 같이 ④~⑥번 옵션이 추가로 나타난다.

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

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

  • Search Form Button : 검색폼 설정 이후 [검색] 버튼을 통해서 검색 결과를 출력 삭제예정?


4. Grouping

List Field Instance Slot 영역에서 테이블 필드별로 그룹핑 기능을 설정 할 수 있다.

만약, 아래 그림과 같이 가입일, 탈퇴일, 휴면전환일 3개의 필드를 그룹핑 하고자 할 경우, 필드 각각의 설정((blue star))을 클릭하여 총 3번 그룹핑 설정을 진행해야 한다.

①번 가입일 설정을 클릭하고, 아래 상세 영역에서 Grouping 옵션을 ON으로 설정한다.

가입일, 탈퇴일, 휴면전환일 3개의 필드를 각각 Grouping{ON}하고 “Date Information“이라는 동일 Group Label로 설정하면 다음과 같이 그룹핑 테이블이 만들어 진다.


5. Summary


Options

1. Title

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

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