다른 테이블의 선택된 Rows를 버튼으로 요청하는 방법

사용 팁
,
1

안녕하세요.

서로 다른 테이블에서 선택한 row 데이터를 버튼을 통해 API나 쿼리 요청의 파라미터로 사용하는 방법에 대해 안내드립니다.

valueFromSelectedRows: true는 기본적으로 한 테이블의 선택된 row 데이터를 처리하는데 사용됩니다. 그러나 여러 테이블에서 선택된 데이터를 조합하여 API 요청이나 쿼리 실행에 사용하는 것도 가능합니다.

이를 위해, 각 테이블의 선택된 데이터를 별도로 가져와 조합한 뒤, 원하는 쿼리나 API 요청의 파라미터로 설정하면 됩니다.

아래는 이를 구현한 예제입니다:

YAML 예제

menus:
- path: pages/j66V_E
  name: 다른 테이블 선택된 데이터로 버튼 클릭하여 실행
pages:
- path: pages/j66V_E
  blocks:
  - type: query
    resource: mysql.qa
    id: query1
    sqlType: select
    sql: >
      SELECT id, name, vintage, price FROM wine_stock LIMIT 10
    selectOptions:
      enabled: true
    headers:
    - type: button
      label: 선택
      button:
        icon: check
        type: primary
      submitFn: |
        // query1과 query2의 선택된 row 데이터를 가져오기
        const rows1 = page.query1.selectOptions?.selectedRows || []
        const rows2 = page.query2.selectOptions?.selectedRows || []

        // 선택된 데이터의 총 개수를 알림
        alert(`${rows1.length + rows2.length}건 선택됨`)

        // query3의 파라미터에 선택된 row ID를 설정
        const ids = page.query3.params.find(e => e.key == 'ids')
        ids.value = [...rows1, ...rows2].map(e => e.id).join(',')
        
        // query3 실행
        await page.query3.trigger()

  - type: query
    resource: mysql.qa
    id: query2
    sqlType: select
    sql: >
      SELECT * FROM wine_order LIMIT 10
    selectOptions:
      enabled: true
  
  - type: query
    resource: mysql.qa
    id: query3
    sqlType: update
    sql: SELECT 1
    params:
      - key: ids
        value: []
    hidden: true
    requestFn: |
      alert('query3 실행')

동작 설명

  1. 데이터 선택:

    • 첫 번째 테이블(query1)과 두 번째 테이블(query2)에서 선택된 row 데이터는 page.query1.selectOptions.selectedRows 및 page.query2.selectOptions.selectedRows로 가져올 수 있습니다.

  2. 데이터 조합:

    • 선택된 row 데이터에서 id 값만 추출하고 이를 콤마로 구분된 문자열로 변환해 query3의 파라미터로 설정합니다.

  3. API/쿼리 실행:

    • 설정된 파라미터를 사용해 query3를 실행합니다.

  4. 결과 확인:

    • 선택된 데이터의 개수와 실행 여부를 확인하는 알림을 표시합니다.

관련하여 추가 질문이 있으면 문의해주세요.
감사합니다.