Grid Column #

VmColumn #

그리드의 컬럼 class.(Vue 컴포넌트가 아님)

• Properties

  • binding ? - string
  • header ? - string
  • align ? - 'left' | 'right' | 'center'..
  • cssClass ? - string
  • name ? - string. FlexGrid.getColumn 메소드로 컬럼을 얻을때 사용할 이름. binding이 없거나 binding이 여러개일때 만 사용
  • 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: '*'일때 최소 폭은 필수.
  • visible ? - boolean
  • dataType ? - 'Number'. 데이터 타입이 숫자값일때만 'Number'로 설정
  • aggregate ? - Aggregate. 집계방법 sum
  • allowDragging ? - boolean
  • allowMerging ? - boolean
  • allowResizing ? - boolean
  • allowSorting ? - boolean
  • format ? - string. dataType이 `Number'일때만 포멧지정. see Globalize
  • isContentHtml ? - boolean
  • isReadOnly ? - boolean. 컬럼의 전체 행을 읽기전용으로 한다. 조건별은 vmReadOnly사용.
  • maxLength ? - number
  • maxWidth ? - number
  • quickAutoSize ? - number
  • sortMemberPath ? - string
  • wordWrap ? -boolean

• Custom Properties

  • vmReadOnly ? - (item: any, r?: number, c?: string | number) => boolean.row 마다 조건별로 읽기전용 설정 함수
  • vmStartBinding ? - string. 해당 컬럼이 범위날짜의 종료일때, 상대적인 시작 컬럼의 binding. 시작~종료 검증용
  • vmEndBinding ? - string. 해당 컬럼이 범위날짜의 시작일때, 상대적인 종료 컬럼의 binding. 시작~종료 검증용
  • vmDateMap ? - VmDataMap. 서버에서 가져올 공통코드로 구성된 콤보의 옵션
  • vmMask ? - Mask. 입력 마스킹의 alias
  • vmMaskOption ? - Inputmask.Options. 입력 마스킹의 상세 옵션
  • vmPopup ? - VmPopup. 팝업

• Usage

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

  * 또는 script에서 작성한 변수 할당.
<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 #

• Properties
  • tableId?: string // 쿼리 id
  • code?: string // 공통코드의 코드
  • optionFirst?: OptionFirst //import('../enum/OptionFirst').OptionFirst // 전체 선택
  • parent?: string // 상하위 관계일때 상위 binding
  • child?: string // 상하위 관계일때 하위 binding
  • shortCut?: string // 단축키

VmPoup #

• Properties