Listbox Format 구현 가이드
format: listbox는 선택 옵션을 제공하는 UI 컴포넌트입니다. 드롭다운과 유사하지만 여러 항목을 한번에 볼 수 있고, 다중 선택이 가능한 특징이 있습니다.
관련하여 다양한 사용방법을 예제와 함께 안내드립니다.
1. 기본 데이터 조회 및 업데이트 (Single Insert/Update)
이 방식은 데이터베이스에서 직접 옵션 목록을 조회하여 리스트박스를 구성하는 방법입니다.
type: query
resource: mysql.qa
sql: |
UPDATE store_display SET display_json = :display_json
WHERE id = 1
requestFn: |
params.map(e => {
if (e.key == 'display_json') {
e.value = JSON.stringify(e.value)
}
})
params:
- key: display_json
format: listbox
multiple: true
listStyle:
minWidth: 300px
height: 300px
overflow: scroll
datalistFromQuery:
type: query
resource: mysql.qa
sql: SELECT DISTINCT name as value, name as label, price FROM wine_stock
template: |
{{value}}
<span class="text-xs font-bold bg-slate-400 text-white px-1 rounded">{{price}}원</span>
주요 특징:
multiple: true로 설정하여 다중 선택 가능datalistFromQuery를 통해 옵션 목록을 동적으로 조회template을 사용하여 커스텀 옵션 표시 형식 지정
2. 모달을 통한 검색 및 선택 (From Search)
검색 모달을 통해 항목을 선택하고 리스트박스에 추가하는 방식입니다.
type: query
resource: mysql.qa
sql: |
UPDATE store_display SET display_json = :display_json
WHERE id = 1
params:
- key: display_json
format: listbox
multiple: true
listStyle:
minWidth: 300px
height: 300px
overflow: scroll
showOptions: false
buttons:
- label: 상품추가
openModal:
width: 600px
height: 500px
blocks:
- type: query
resource: mysql.qa
sql: |
SELECT name AS value, name AS label, vintage, price
FROM wine_stock LIMIT 3
selectOptions:
enabled: true
- label: 상품제거
deleteItem: true
template: |
{{value}}
<span class="text-xs font-bold bg-slate-400 text-white px-1 rounded">{{price}}원</span>
주요 특징:
showOptions: false로 설정하여 기본 옵션 목록을 숨김- 커스텀 버튼을 통한 모달 검색 기능 구현
- 항목 삭제 버튼 제공
3. 테이블 형식의 업데이트 (Table updateOptions)
테이블 셀에서 직접 리스트박스를 조작하는 방식입니다.
type: query
resource: mysql.qa
sql: |
SELECT * FROM store_display WHERE id = 1
columns:
display_json:
updateOptions:
type: query
resource: mysql.qa
sql:
UPDATE store_display SET display_json = :value
WHERE id = :id
requestFn: |
params.map(e => {
if (e.key == 'value') {
e.value = JSON.stringify(e.value)
}
})
format: listbox
multiple: true
listStyle:
minWidth: 300px
showOptions: false
주요 특징:
- 테이블 컬럼에 직접 리스트박스 구현
updateOptions를 통한 인라인 업데이트 지원- JSON 형식으로 데이터 변환 처리
4. 폼 형식의 업데이트 (Form updateOptions)
폼 형식으로 데이터를 표시하고 업데이트하는 방식입니다.
type: query
resource: mysql.qa
sql: |
SELECT * FROM store_display WHERE id = 1
display: form
responseFn: |
return rows.map(e => {
return e
})
columns:
display_json:
updateOptions:
type: query
resource: mysql.qa
sql:
UPDATE store_display SET display_json = :value
WHERE id = :id
requestFn: |
params.map(e => {
if (e.key == 'value') {
e.value = JSON.stringify(e.value)
}
})
format: listbox
multiple: true
listStyle:
minWidth: 300px
showOptions: false
template: |
{{value}}
<span class="text-xs font-bold bg-slate-400 text-white px-1 rounded">{{price}}원</span>
주요 특징:
- 폼 형식의 데이터 표시
responseFn을 통한 응답 데이터 전처리- 템플릿을 활용한 커스텀 옵션 표시
공통 스타일링 옵션
모든 케이스에서 사용 가능한 스타일링 옵션들입니다:
listStyle:
minWidth: 300px # 최소 너비
height: 300px # 높이
overflow: scroll # 스크롤 설정
템플릿 사용
모든 케이스에서 공통적으로 사용할 수 있는 템플릿 구문:
template: |
{{value}}
<span class="text-xs font-bold bg-slate-400 text-white px-1 rounded">{{price}}원</span>
이를 통해 가격 정보를 포함한 커스텀 옵션 표시가 가능합니다.
관련하여 궁금하신 점은 문의주시기 바랍니다.
감사합니다.