! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

FlexGrid 용 Vue 셀 템플릿 > 블로그 & Tips

본문 바로가기

FlexGrid 용 Vue 셀 템플릿

페이지 정보

작성자 GrapeCity 작성일 2019-11-13 17:06 조회 3,353회 댓글 0건

본문

FlexGrid 용 Vue 셀 템플릿

테이블 형식 데이터 표시 및 편집은 대부분의 비즈니스 애플리케이션에서 중요한 부분입니다. 애플리케이션이 직원 목록, 제품 카탈로그 또는 주가 목록을 처리하는지 여부에 관계없이 테이블 형식의 데이터를 시각화하고 변환(정렬/그룹화/필터링)하고 편집할 수 있는 쉬운 방법이 필요합니다. 성능을 저하시키지 않으면서 스크롤 가능한 데이터의 큰 목록을 표시해야 할 수도 있습니다.


이런 경우에 FlexGrid와 같은 데이터 그리드 UI 컨트롤을 사용해야 합니다.


FlexGrid는 기본적으로 테이블 형식의 데이터를 표시하고 편집하는 데 큰 역할을 합니다. 그러나 기본적인 데이터 표시 그 이상을 제공해야 하는 경우가 있습니다. 예를 들어, 데이터 셀 텍스트 옆에 이미지나 스파크라인을 렌더링해야 할 수 있으며, 대화식 확인란을 열 머리글에 추가해야 할 수 있습니다. 또는 수많은 옵션 중에서 다른 유형의 셀 컨텐츠 사용자 정의가 필요할 수 있습니다.


Vue 애플리케이션에서 UI 부분을 정의하는 가장 자연스럽고 편리한 방법은 템플릿 구문을 사용하는 것입니다. 셀 템플릿을 사용하면 속성 및 이벤트 바인딩을 사용하는 HTML 요소 및 Vue 컴포넌트가 포함된 임의의 복잡한 셀 내용을 선언적으로 정의할 수 있습니다.


FlexGrid는 다른 유형의 여러 셀로 구성됩니다. 데이터 셀, 열 머리글, 바닥 글 및 행 머리글은 모두 서로 다른 유형의 셀의 예입니다. 셀 템플릿을 사용하면 FlexGrid에서 지원하는 모든 셀 유형(총 10 가지 셀 유형)에 대한 내용을 선언적으로 정의할 수 있습니다.


또한 셀 편집기라는 특수한 유형의 셀 템플릿이 있으며, 이를 통해 데이터 셀 편집을 위한 UI를 정의할 수 있습니다. 이를 사용하면 JavaScript 코드를 한 줄도 작성하지 않아도 Wijmo InputNumber 또는 InputDate와 같은 고급 입력 컨트롤이나 사용자 정의 컴포넌트를 셀 편집기로 사용할 수 있습니다. 또는 임의의 복잡한 UI로 사용자 정의 셀 편집기를 작성할 수 있습니다.


Vue 셀 템플릿 추가


이 포스팅에서는 셀 템플릿 정의 예제를 위해 이 샘플을 참조할 것입니다. 모든 유형의 셀과 함께 셀 템플릿을 사용하는 방법을 설명하고 사용자가 해당 체크박스를 선택하거나 해제하여 셀의 특정 유형에 셀 템플릿 적용을 선택적으로 사용하거나 사용하지 않도록 설정할 수 있습니다.


Vue 셀 템플릿


FlexGrid에 Country 열이 있고 resources 폴더에 country_name.png 상태 플래그 이미지 세트가 있다고 가정하겠습니다그리고 열의 데이터 셀에서 국가 이름 옆에 플래그 이미지를 그리려고 합니다.


이 방법으로 셀 내용을 정의하는 Vue 템플릿 마크업은 다음과 같습니다.

<wj-flex-grid-column header="Country" binding="country" width="*">
    <wj-flex-grid-cell-template cellType="Cell" v-if="customCell" v-slot="cell">  
        <img :src="'resources/' + cell.item.country + '.png'" />                       
         {{cell.item.country}}
    </wj-flex-grid-cell-template>
</wj-flex-grid-column>


셀 템플릿은 wj-flex-grid-cell-template 컴포넌트를 사용하여 선언됩니다. wj-flex-grid-cell-template 요소의 내용이 셀의 내용이 됩니다. cellType 속성이 템플릿에 적용할 셀의 타입을 지정합니다. 위의 예에서 볼 수 있는 'Cell' 값은 정규 데이터 셀을 의미합니다.


데이터 셀이 특정 그리드 열(이 예에서는 국가 열)과 관련되어 있으므로 셀 템플릿 정의를 해당 열 정의(wj-flex-grid-column 컴포넌트)에 중첩시킵니다.


셀 템플릿은 모든 특정 셀에 대한 컨텐츠를 그리기 위해 셀 특정 데이터가 필요합니다. 이로 인해 셀 템플릿은 Vue scoped slot 메커니즘을 사용하여 구현됩니다. 셀 범위 속성을 참조하는 가장 간단하고 간결한 방법 은Vue 2.6.0에 도입된 새로운 v-slot 지시문을 사용하는 것입니다. 슬롯 특정 속성을 포함하는 데이터 객체에 이름을 제공하며, 템플릿 마크업에서 이러한 속성을 참조하는 데 사용할 수 있습니다. 위의 예에서는 v-slot = "cell" 정의를 사용하여 cell 이라고하고 그 셀의 데이터 항목을 참조하는 item 속성을 사용합니다. cell.item.country 사용하여 이 항목에서 country 속성 값을 검색합니다.


셀 범위 데이터 오브젝트의 다른 특성은 row(참조 셀의 Row 오브젝트) 및 col(참조 셀의 Column 오브젝트)입니다.


wj-flex-grid-cell-template 요소에 v-slot 지시어를 지정할 수 있습니다. Vue 버전을 v-slot 지시문이 없는 2.6.0보다 낮은 버전을 사용하는 경우, 이전의 slot-scope 지시문을 사용하여 셀 데이터 컨텍스트를 참조할 수 있습니다. 이 경우, slot-scope를 지정하는 추가 <template> 요소로 템플릿 컨텐츠를 랩핑해야 합니다.


slot-scope를 사용하기 위해 재작업된 예는 다음과 같습니다.

<wj-flex-grid-column header="Country" binding="country" width="*">
    <wj-flex-grid-cell-template cellType="Cell" v-if="customCell">
        <template slot-scope="cell"> 
            <img :src="'resources/' + cell.item.country + '.png'" />                       
             {{cell.item.country}}
        </template>
    </wj-flex-grid-cell-template>
</wj-flex-grid-column>


slot-scope = "cell" 지시문이 있는 <template>요소를 추가한 방법에 주목할 필요가 있습니다.


참조 샘플에서 사용자는 특정 유형의 셀 템플릿을 동적으로 활성화하거나 비활성화할 수 있습니다. 일반 데이터 셀 템플릿의 활성화 상태는 샘플 컴포넌트의 부울 customCell 속성에 저장됩니다. 우리는 v-if 지시어를 wj-Flex-grid-cell-template 컴포넌트에 추가하여 요소 트리에 셀 템플릿 정의를 동적으로 추가하거나 요소 트리에서 제거합니다. 이러한 방식으로, 우리는 특정 열 셀에 적용된 셀 템플릿을 활성화하거나 비활성화 합니다.


일부 FlexGrid 셀 타입은 특정 열,예를 들면 일반 데이터 셀 및 열 머리글/바닥 글 셀)과 관련이 있습니다. 왼쪽 상단 및 행 머리글 셀과 같은 다른 셀들은 특정 열에 속하지 않습니다. 우리는 그것들을 각각 열 수준 및 격자 수준 셀이라고 부릅니다. 위에서 언급했듯이 열 수준 셀의 템플릿은 열 컴포넌트 안에 선언해야 합니다. 비슷한 방식으로 그리드 수준 셀 템플릿은 wj-flex-grid 컴포넌트의 하위로 정의되어야 합니다.


예를 들어, 행 헤더를 사용자 정의하여 행 색인을 표시하려면 wj-flex-grid 요소에 중첩된 다음 셀 템플릿 선언을 사용할 수 있습니다.

<wj-flex-grid :itemsSource="itemsSource"><wj-flex-grid-cell-template cellType="RowHeader" v-if="customRowHeader" v-slot="cell">
         {{cell.row.index + 1}}
    </wj-flex-grid-cell-template></wj-flex-grid>


여기서 cell.row 데이터 컨텍스트 속성을 사용하여 이 행 헤더가 속한 행의 인덱스를 검색합니다. 


셀 에디터


FlexGrid는 기본적으로 포괄적인 데이터 셀 편집 환경을 제공합니다. 셀을 두 번 클릭하거나 선택한 셀에 텍스트를 입력하면 셀을 편집 모드로 전환하여 새 셀 값을 입력 한 다음 셀 밖으로 포커스를 이동하거나 엔터 키를 눌러 저장합니다. 기본적으로 FlexGrid 에디터는 키보드를 사용하여 새 값을 입력 할 수 있는 입력 요소일 뿐입니다. 그러나 때로는 보다 정교한 편집 환경을 사용자에게 제공하고자 할 수도 있습니다.


예를 들어, 드롭 다운 달력을 날짜 셀 에디터로 사용하거나 숫자 셀의 증가/감소 버튼이 있는 숫자 입력 컨트롤을 사용할 수 있습니다. 또는 여러 입력 컨트롤로 구성된 복잡한 편집 UI를 만들어야 할 수도 있습니다.


셀 템플릿을 사용하면 다른 셀 유형에 대한 템플릿을 작성하는 데 사용하는 것과 같은 편리한 방식으로 셀 에디터를 작성할 수 있습니다.


예를 들어, 이 템플릿은 Wijmo InputNumber 컨트롤을 숫자 Downloads 열의 편집기로 사용합니다.

<wj-flex-grid-column header="Downloads" binding="downloads" :width="170">
    <wj-flex-grid-cell-template cellType="CellEdit" v-if="customCellEdit" v-slot="cell">
        <wj-input-number class="cell-editor"
            v-model="cell.value"
            :step="1"></wj-input-number>
    </wj-flex-grid-cell-template>
</wj-flex-grid-column>


특수한 CellEdit cellType 은 열의 셀 에디터로 사용되는 템플릿을 나타냅니다.


셀 데이터 컨텍스트 객체는 이 유형의 템플릿에 대한 추가적인 value 속성을 추가하는데, 이 템플릿은 raw 셀 값을 저장합니다. 이 속성 값을 변경하면 셀 편집이 완료된 후 FlexGrid에서 해당 값을 새 셀 값으로 저장할 수 있습니다. 결과적으로, 대부분의 경우 value와 사용자가 입력한 제어 값을 저장하고 있는 입력 컨트롤 속성 사이에 양방향 바인딩을 설정하는 것만으로도 충분합니다. 이 예에서와 같이 v-model = "cell.value" 양방향 바인딩과 함께 wj-input-number 컴포넌트를 사용합니다. 또한, sync 수정자를 사용하는 대체 양방향 바인딩 구문을 사용할 수도 있습니다. 양방향 바인딩 정의는 다음과 같습니다. : value.sync = "cell.value"


Wijmo의 Vue 양방향 바인딩 지원에 대해 더 자세히 알아보세요.


완전한 기능을 갖춘 셀 에디터를 작성하기 위해 JavaScript 코드가 단 한 줄도 필요하지 않았으며 모든 것이 선언적으로 수행되었습니다.


결론


FlexGrid 셀 템플릿은 사용자 정의 셀 내용을 정의하는 강력한 수단으로 사용할 수 있습니다. FlexGrid 셀 템플릿은 애플리케이션의 나머지 UI를 설명하는 데 사용하는 것과 동일한 일반적인 Vue 템플릿 구문을 사용합니다. 속성 및 이벤트 바인딩을 사용할 수 있는 템플릿 내에 임의의 HTML 요소, 사용자 지정 컴포넌트 및 지시문을 사용하면 JavaScript 코드를 단 한줄도 작성하지 않아도 셀에 대한 복잡한 모양을 선언적으로 만들 수 있습니다.


셀 템플릿을 사용하면 복잡한 그리드 UI 구현 시 생산성이 높아지고 전체 애플리케이션 코드를 보다 쉽게 ​​유지보수할 수 있습니다.


Vue 그리드 셀 템플릿에 대한 자세한 내용은 문서를 참조하시길 바랍니다.



추가 자료 : 



  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.