분류 javascript

TUI Grid - 강력한 그리드 제어.

컨텐츠 정보

  • 조회 2,236 (작성일 )

본문

데이터를 표시하고 편집하는 강력한 구성 요소. 최고의 데이터 트랜스포머를 경험하십시오!


https://github.com/nhn/tui.grid/ 


http://ui.toast.com/tui-grid/


tui-grid 


? 목차 


? 패키지


TOAST UI Grid의 기능은 Plain javaScript, React, Vue Component를 사용할 때 사용할 수 있습니다.

? 토스트 UI 그리드는 최고의 변환기입니다 


모든 형식으로 데이터 표시 가능 


스타일링 

TOAST UI Grid는 여러 데이터를 표시, 편집, 추가 및 삭제할 수 있는 구성 요소입니다. 표시된 데이터에 단위를 추가하고 html을 사용하여 텍스트 데이터 대신 이미지와 링크를 나타낼 수 있습니다.

style 


Summary 


요약 기능을 사용하면 여러 행의 데이터를 계산하고 결과를 표시 할 수 있습니다. 총합, 평균, 최대 값 및 최소값을 자동으로 계산하고 값이 변경 될 때마다 각 결과를 업데이트합니다.


summary 


Tree Data 


버전 3 이상부터는 트리 데이터를 사용하여 계층 구조로 나타낼 수 있습니다. 이제 원하는 데이터를 처리해 봅시다.


tree 


사용자 정의 편집 요소를 제공합니다 


데이터를 편집하기 위해 html을 사용하여 편집 요소를 직접 만들 필요는 없습니다. 텍스트, 선택 상자, 확인란, 라디오 버튼과 같은 다양한 입력 요소를 지원합니다. 옵션을 설정하기 만하면 데이터 편집 방법을 설정할 수 있습니다. 사용자 정의 편집기를 통해 원하는 대로 편집 요소를 표시 할 수도 있습니다.


59417111-9e181280-8e01-11e9-8de7-2df819b36354 


간단하고 사용하기 쉬운 테마 


기본, 스트라이프 (얼룩말 무늬) 및 깨끗한 테마의 세 가지 테마가 있습니다. 테마 API를 통해 제공된 테마에 원하는 디자인을 쉽게 추가 할 수 있습니다. 테마 API는 버전 3부터 개선되어 CSS 스타일을 직접 수정하지 않고도 머리글 / 본문 영역 및 세로 / 가로 경계선의 배경색을 쉽게 제어 할 수 있습니다. 테마를 사용하여 그리드를 사용자 정의하십시오.


theme-default 


theme-striped 


theme-clean 


또한 아래의 데모 페이지에서 다양한 강력한 기능을 찾을 수 있습니다. ???


? 특징 


? 예 


다음은 더 많은 예제와 TOAST UI Grid로 재생됩니다!


TypeScript 


TypeScript를 사용하는 경우 import module = require ( 'module')을 사용하여 그리드 모듈을 가져와야 합니다. "export ="및 "import = require()"를 참조하십시오.


import Grid = require('tui-grid');

const instance = new Grid({
  // ...options
});


? 브라우저 지원 


Chrome ChromeIE Internet ExplorerEdge EdgeSafari SafariFirefox Firefox
Yes9+YesYesYes

? 토스트 UI 제품군 



? 사용 




TUI Grid