데이터 타입과 에디터 설정하기
데이터 타입 설정
리얼그리드 DataProvider의 DataField는 Text, Number, Boolean, Datetime 중 하나가 될 수 있습니다.
데이터 타입을 적용하기 위해서는 realgrid컴포넌트의 RealGrid 클래스를 import해야 합니다.
필드 생성 시 하단 예시와 같이 dataType을 지정하고 원하는 RealGrid 클래스의 ValueType을 지정해서 사용 하면 됩니다.
<template>
<div style="width: 1000px; height: 400px">
<RealGridVue
ref="gridRef"
:rows="[
{field1:'text1', field2:10000, field3:'2023-01-01', field4:false},
{field1:'text2', field2:20000, field3:'2023-01-02', field4:true}
]"
:grid-props="{
edit: { insertable: true, appendable: true },
display: { rowHeight: 40 },
}"
:data-props="{ softDeleting: true }"
>
<RGDataField field-name="field1" data-type="RealGrid.ValueType.TEXT"></RGDataField>
<RGDataField field-name="field2" data-type="RealGrid.ValueType.NUMBER"></RGDataField>
<RGDataField field-name="field3" data-type="RealGrid.ValueType.DATETIME"></RGDataField>
<RGDataField field-name="field4" data-type="RealGrid.ValueType.BOOLEAN"></RGDataField>
<RGDataColumn field-name="field1" :width="100" :header="{text: 'TEXT'}"></RGDataColumn>
<RGDataColumn field-name="field2" :width="100" :header="{text: 'NUMBER'}"></RGDataColumn>
<RGDataColumn field-name="field3" :width="100" :header="{text: 'DATETIME'}"></RGDataColumn>
<RGDataColumn field-name="field4" :width="100" :header="{text: 'BOOLEAN'}"></RGDataColumn>
</RealGridVue>
</div>
</template>
<script setup lang="ts">
import * as RealGrid from "realgrid";
import { RealGridVue, RGDataColumn, RGDataField } from "realgrid-vue";
import { ref } from "vue";
const gridRef = ref<RealGridVue>();
</script>각 타입에 대한 자세한 설명은 데이터 타입 데모를 참조하세요.
에디터 설정
RGDataColumn props를 통해 editor속성을 아래와 같이 지정해서 편집 시 원하는 타입의 편집기로 사용할 수 있습니다.
<RGDataColumn field-name="field1" name="col1" :width="100" :header="{text: 'TEXT'}" :editor="{type:'text'}"></RGDataColumn>
<RGDataColumn field-name="field2" name="col2" :width="100" :header="{text: 'NUMBER'}" :editor="{type:'number'}"></RGDataColumn>편집기에 대한 설정 및 종류는 데모에서 확인하실 수 있습니다.