그리드

`VmGrid`

그리드를 생성한다.

변수명
- 그리드 변수명은 flex로 시작해서 프로그램애서 그리드가 1개이면 flex, 여러개이면 flexMaster, flexDetail와 같이 작성한다.
- 그리드의 변수 선언은 let으로 하고 initialized 이벤트에서 선언한 변수에 할당한다.
- initialized 함수명은 그리드변수명 + Initialized로한다.

  let flex:VmFlexGrid
  let flexMaster:VmFlexGrid
  let flexDetail:VmFlexGrid

  function flexInitialized(s: VmFlexGrid) {
    flex = s
  }
  function flexMasterInitialized(s: VmFlexGrid) {
    flexMaster = s
  }
  function flexDetailInitialized(s: VmFlexGrid) {
    flexDetail = s
  }

Props
- columns: - VmFlexColumn[]. 그리드-컬럼 참조
- label ? - string. 그리드의 제목
- vmFilter ? - boolean. 그리드 헤더에 필터기능 제거. 기본값 true
- dblClick ? - (row?: number, col?: number) => void. 그리드에서 더블클릭했을때 실행할 함수.
- keyupEnter ? - (e?: KeyboardEvent) => void. 그리드에서 엔터키를 쳤을때 실행할 함수.
  이하는 wijmo FlexGrid의 properties
- allowDragging ? - AllowDragging.
- allowMerging ? - AllowMerging.
- allowResizing ? - AllowResizing.
- allowSorting ? - boolean.
- frozenColumns ? - number.
- frozenRows ? - number.
- isReadOnly ? - boolean. 그리드 읽기 전용 여부. 기본값 true
Emits
- initialized 그리드가 초기화되면 호출된다. 파라미터의 그리드 instance를 받아서 미리 선언한 그리드 변수에 할당한다.
  - @parameter vmFlexGrid
```
  (e: 'initialized', vmFlexGrid: VmFlexGrid): void
```

slot

default. 그리드의 헤더부분 우측에 표시될 버튼 등

  <VmGrid>
    <VmButton @click="addRow">행추가</VmButton>
    <VmButton @click="removeRow">행삭제</VmButton>
  </VmGrid>

header-left label props 대신 직접 그리드 상단 좌측의 그리드 제목을 작성.

  <VmGrid>
    <tempate #header-left>
      그리드 제목
    </template>
  </Vmgrid>

Example

<template>
  <VmGrid
    label="그리드 제목"
    @initialized="flexInitialized"
    :column="[
      {}, {}
    ]"
  />
</template>
<script setup lang="ts">
  let flex: VmFlexGrid
  function flexInitialized(s: VmFlexGrid) {
    flex = s
    // 이하 그리드 이벤트 등록
  }
</script>

`VmFlexGrid`

wijmo의 FlexGrid class를 상속해서 기능을 추가한 class. VmGrid의 initialized 함수의 파라미터의 타입으로 사용.

`VmColumn`

wijmo의 Column class를 상속해서 기능을 추가한 class인데 VmGrid의 column정의에는 VmFlexColumn를 사용한다.

`VmFlexColumn`

VmGrid의 columns props의 타입.
VmColumn을 사용하면 속성을 구현하지 않음 경고가 떠서 Partial을 적용한 타입.

wijmo Column Properties
- binding ? - string 서버에서 조회한 json 데이터의 프로퍼티와 에서 매칭되는 이름. 저장할때 db table의 컬럼명.
- header ? - string 그리드 헤더에 표시되는 제목
- align ? - 'left' | 'right' | 'center'.. 사용하지 않음. 정렬은 cssClass를 사용한다.
- cssClass ? - string 그리드 셀부분의 정렬
- name ? - string. FlexGrid.getColumn 메소드 컬럼을 얻을때 binding 또는 name을 파리미터로 넣는다. 서버에 전송할 필요가 없는 컬럼은 binding 없이 name을 지정한다.
- width ? - number | string. For example, if a grid has three columns with widths "100", "", and "3", the first column will be 100 pixels wide, the second will take up 1/4th of the remaining space, and the last will take up the remaining 3/4ths of the remaining space.
- minWidth ? - number. width: '*'일때 최소 폭은 필수로 입력한다. 드래그해서 컬럼 폭을 0으로 만들면 안보임.
- visible ? - boolean 화면에 표시할지 여부
- dataType ? - 'Number'. 데이터 타입이 숫자값일때만 'Number'로 설정. 그외는 생략
- aggregate ? - 그리드 푸터에 GroupRow를 생성하면 집계한다. Sum Aggregate Enumeration
- allowDragging ? - boolean 컬럼의 드래드 가능여부. https://www.grapecity.com/wijmo/api/enums/wijmo_grid.allowdragging.html
- allowMerging ? - boolean 병합 방법. https://www.grapecity.com/wijmo/api/enums/wijmo_grid.allowmerging.html
- allowSorting ? - boolean 헤더셀을 클릭하면 정렬할지 여부
- ~~dataMap~~ ? - vmDataMap을 사용한다.
- format ? - string. dataType이 `Number'일때만 포멧지정. see Globalize
- isContentHtml ? - boolean
- isReadOnly ? - boolean. 컬럼의 전체 행을 읽기전용으로 한다. 조건별은 vmReadOnly사용.
- maxLength ? - number
- maxWidth ? - number
- quickAutoSize ? - number
- sortMemberPath ? - string
- wordWrap ? -boolean
vm Custom Properties
- vmReadOnly ? - (item: any, r?: number, c?: string | number) => boolean.row 마다 조건별로 읽기전용 설정 함수
- vmRangeSttBinding ? - string. 해당 컬럼이 범위날짜의 종료일때, 상대적인 시작 컬럼의 binding. 시작~종료 검증용
- vmRangeEndBinding ? - string. 해당 컬럼이 범위날짜의 시작일때, 상대적인 종료 컬럼의 binding. 시작~종료 검증용
- vmDateMap ? - VmDataMap. 서버에서 가져올 공통코드로 구성된 콤보의 옵션
- vmMask ? - Mask. 입력 마스킹의 alias
- vmMaskOption ? - Inputmask.Options. 입력 마스킹의 상세 옵션
- vmPopup ? - VmPopup. 팝업
Usage

<template>
  * 컴포넌트 태그의 props에 직접작성
  <VmGrid :column="[
    {binding: ''}, 
    {binding: ''},
    ...
  ]" />
</template>

  * 컬럼정의가 복잡할경우 script에서 작성하고 변수 할당. 
   - template보다 script 영역에서 Typing 지원이 더 잘된다.
<template>
<VmGrid :column="flexColumns" />
</template>
<script setup lang="ts">
const flexColumns: VmFlexColumn[] = [
  { binding: 'stringMask', header: '마스킹된', width: 100, vmMask: '', vmMaskOption: {},
    vmReadOnly: (item: any) => {
      return true
    },
  },
  { binding: 'dateStart', header: '시작일자', width: 100,  vmEndBiding: 'dateEnd'
    vmReadOnly: (item: any) => {
      return true
    },
  },
  { binding: 'dateEnd', header: '종료일자', width: 100,  vmStartBiding: 'dateStart',
    vmReadOnly: (item: any) => {
      return true
    },
  },
  { binding: 'popup', header: '팝업', width: 100,  vmStartBiding: 'dateStart',
    vmReadOnly: (item: any) => {
      return true
    },
  },
  { binding: 'remark', header: '비고', width: '*', isReadOnly: true },

]
</script>

VmDataMap

그리드의 컬럼중에서 콤보박스 입력을 정의하기 위한 class. wijmo의 DataMap class를 상속한다.

Properties
- tableId ? - string 쿼리 id
- code ? - string 공통코드의 코드
- optionFirst ? - OptionFirst ALL | CHOOSE
- parent ? - string 상하위 관계일때 상위 binding
- child ? - string 상하위 관계일때 하위 binding
- shortCut ? - string 단축키

그리드 #

VmGrid #

VmFlexGrid #

VmColumn #

VmFlexColumn #

VmDataMap #

그리드

`VmGrid`

`VmFlexGrid`

`VmColumn`

`VmFlexColumn`

VmDataMap