대용량 데이터를 위한
고성능 JavaScript 데이터 그리드

List of Services

    데이터 바인딩, 편집, 필터링, 정렬 등 다양한 기능을 포함하고 있는 FlexGrid를 활용해 여러분의 웹 애플리케이션을 업그레이드해 보세요.

    • 데이터 바인딩, 편집, 필터링, 정렬 등 다양한 기능 포함
    • 스파크 라인, 버튼, 하이퍼 링크, 별점 및 이미지 옵션을 통해 새로운 스타일로 데이터 표현
    • 인기 있는 Angular, React, Vue.js 완벽 지원
    • 모바일 우선의 친숙한 인터페이스
    다운로드 속도 테스트

    제한없는 CellTemplates

    이제 Angular, React, Vue 및 PureJS에서도 셀 템플릿을 사용할 수 있습니다. 이 새로운 기능은 선언적 마크업 및 바인딩 표현식을 지원하는 제한없는 템플릿을 제공합니다.

    Excel 유사한 친숙한 기능

    Excel과 같은 키보드 지원, 데이터 집계, 셀 병합, 별 크기 조정 및 셀 고정 기능은 최종 사용자에게 Excel과 유사한 작업 환경을 제공합니다.

    TypeScript로 작성된 JavaScript DataGrid

    TypeScript를 사용하면 객체지향 언어인 C#/Java의 느낌으로 개발이 가능하며, 디자인 타임 오류 검사 및 완전한 IntelliSense 기능을 얻을 수 있습니다.

    작은 설치 공간으로 성능 향상

    FlexGrid는 성능에 영향을 주지 않고 로드 시간을 최소화하여 웹 애플리케이션의 사이즈를 작게 유지할 수 있습니다.

    최고의 프레임워크 지원

    특정 프레임워크에 구애 받지 않도록 구축된 Wijmo는 Angular, AngularJS, ReactJS, Vue.js , Vue3 Beta 및 Knockout에 대한 완전한 지원을 포함합니다.

    보안 수준

    Wijmo는 CSP(콘텐츠 보안 정책)를 준수하며, 보안 기능을 손상시키지 않고, JavaScript 애플리케이션에서 원활하게 작동합니다.

    무엇이든 물어보세요!

    MESCIUS의 전문가 그룹에게 Wijmo에 대한 막연한 고민과 궁금증을 들려주세요.
    여러분들의 고민을 함께 공감하고 도움을 드리겠습니다. 

    온라인 제품 상담 개발자 포럼(기술 지원)

    JavaScript 데이터 그리드 데모

    FlexGrid

    JavaScript 데이터 그리드 주요 기능

    사용자 정의 셀

    Wijmo의 JavaScript DataGrid인 FlexGrid를 사용하면 스타일 요구 사항에 맞게 DataGrid 내 모든 셀의 모양, 느낌 및 기능을 크게 사용자 정의할 수 있습니다. Wijmo 및 사용자 정의 구성 요소를 모두 셀에 추가하고 조건부로 셀 및 해당 내부 데이터의 스타일을 지정하며 DataGrid 내에서 셀을 동적으로 업데이트할 수 있습니다.


    TreeGrid

    하위 항목을 데이터 그리드에 바인딩하여 데이터를 표시할 TreeGrid를 생성할 수 있습니다. TreeGrid는 바운드 및 언바운드 모드, 성능 향상을 위한 데이터 지연 로드, 표시할 XML 데이터 가져오기를 모두 지원합니다.


    검색

    전체 텍스트 검색을 수행할 수 있습니다. 즉, 데이터를 필터링하여 데이터 그리드에서 찾은 일치하는 모든 인스턴스를 표시할 수 있습니다. 스캔한 텍스트와 일치하는 항목을 모두 강조 표시할 수 있습니다.

    데모

    그룹화

    Wijmo의 JavaScript 데이터 그리드인 FlexGrid를 사용하면 CollectionView를 통해 데이터를 그룹화할 수 있습니다. 단일 DataGrid에 여러 그룹을 설정하고 Outlook 스타일의 GroupPanel을 구현하여 사용자가 열을 드래그 앤 드롭하여 그룹을 만들 수 있도록 합니다.


    FlexGrid

    JavaScript 데이터 그리드 전체 기능

    데이터 & 퍼포먼스

    • 데이터 바인딩

      FlexGrid는 클라이언트측 및 서버측 데이터 바인딩을 지원합니다. 간단한 JavaScript 배열, 관찰 가능한 CollectionViews, 원격 OData 서버 또는 실시간 WebSocket 서버에 바인딩할 수 있습니다.


    • 가상 스크롤링

      FlexGrid를 사용하면 데이터를 로드할 때 데이터를 가상화할 수 있습니다. FlexGrid를 스크롤하면 필요에 따라 그리드에 데이터가 로드되므로 성능이 향상되고 무한 스크롤이 가능합니다.


    • 실시간 업데이트

      FlexGrid 컨트롤은 데이터 소스가 변경될 때 모든 셀을 자동으로 업데이트합니다.


      • 실시간 업데이트 - 데모

    데이터 정리

    • 선택

      FlexGrid를 사용하면 Excel과 마찬가지로 여러 행과 열에서 셀 범위를 선택할 수 있습니다. FlexGrid를 사용하면 선택 영역을 수정하고 다른 구성 요소를 통해 선택 항목을 설정할 수도 있습니다.


    • 정렬

      Wijmo의 JavaScript 데이터 그리드인 FlexGrid는 CollectionView를 통한 데이터 정렬을 지원하며 주문형 정렬 및 다중 열 정렬과 같은 기능을 허용하도록 사용자 정의할 수 있습니다.


    • 페이징

      FlexGrid는 CollectionView 컴포넌트를 사용하여 페이지 당 합리적인 양의 데이터를 표시하는 DataGrid를 생성할 수 있습니다. CollectionView를 데이터 소스에 직접 연결하고 서버 측 페이징을 허용할 수도 있습니다.


    • 열 고정 & 핀 고정

      Excel과 유사한 행 및 열 고정 및 고정 기능을 제공합니다. 이를 통해 사용자가 DataGrid의 콘텐츠를 탐색할 때 행과 열을 계속 볼 수 있습니다.


    • 열 크기 조정

      코드에서 열 크기를 지정할 수 있을 뿐만 아니라 사용자가 DataGrid를 렌더링한 후 열 크기를 조정할 수 있습니다. Excel과 마찬가지로 사용자는 열 머리글의 오른쪽 가장자리를 끌어 크기 조정을 확장하거나 축소하거나 가장자리를 두 번 클릭하여 내용에 맞게 열 크기를 자동으로 조정할 수 있습니다.


    • 열 재정렬

      헤더를 드래그 앤 드롭하여 열을 수정하고 전체 DataGrid 또는 개별 열에서 재정렬을 비활성화할 수 있습니다. allowReordering 속성을 true로 설정하고 DataGrid 내의 한 인덱스에서 다른 인덱스로 열 머리글을 드래그 앤 드롭하여 재정렬을 활성화합니다.



    셀 사용자 정의

    • 셀 템플릿

      FlexGrid 셀에 사용자 정의 콘텐츠를 선언적으로 정의할 수 있으며, 템플릿에는 속성 및 이벤트 바인딩과 함께 임의의 컴포넌트 및 HTML 요소가 포함될 수 있습니다. 모든 유형의 그리드 셀을 템플릿을 사용해 정의할 수 있습니다(데이터 셀, 헤더 셀, 편집기 등).


    • 셀 병합

      FlexGrid는 콘텐츠 기반 셀 병합을 지원합니다. 


      allowMerging 속성을 통해 콘텐츠를 일치시켜 데이터 셀을 병합할 수 있습니다. 헤더 셀을 병합하고, 사용자 정의 셀 병합 규칙을 만들고, FlexGrid가 셀을 병합하는 방법에 대한 제한을 설정합니다.


    • 조건부 서식

      formatItem 이벤트를 사용하여 각 셀에 표시된 콘텐츠나 스타일을 사용자 정의할 수 있습니다.


    • 스파크라인

      formatItem 이벤트를 사용하여 각 셀에 표시된 콘텐츠나 스타일을 사용자 정의할 수 있으며, 별 등급과 스파크라인을 정의할 수 있습니다.


    데이터 추가 및 편집

    • DataMaps

      FlexGrid는 ID 대신 고객 이름을 표시하는 것과 같은 자동 조회 기능을 그리드에 제공하는 간단한 방법으로 DataMap 기능을 제공합니다. FlexGrid는 셀을 편집할 때 사용할 유효한 항목이 있는 DataMap을 사용하여 열에 드롭다운을 추가합니다. DataMaps는 동적 DataMaps 및 DataMap 편집기도 지원합니다.


    • 편집

      FlexGrid는 Excel과 유사한 셀 내 편집을 기본적으로 지원합니다. 데이터 유효성 검사, 팝업 편집기 및 사용자 지정 편집기와 같이 FlexGrid 내부에 저장된 데이터를 사용자 지정합니다.

            Event-Based | CollectionView-Based

    • 새로운 행 추가

      추가 행에 대한 코드를 작성하지 않고도 새 행 기능을 구현할 수 있습니다. DataGrid에 빈 행을 추가하면 사용자가 더 많은 데이터 행을 추가할 수 있습니다. 그리드의 allowAddNew 속성을 설정할 때 DataGrid의 상단 또는 하단에 빈 행을 자동으로 포함할 수 있습니다.


    접근성 및 지역화

    • 접근성

      FlexGrid는 접근성을 지원하는 광범위한 기능 목록과 함께 제공됩니다. ARIA 기술은 사용자가 FlexGrid와 상호작용하고 수정하는 데 도움이 되며 Excel과 단축키를 통해 콘텐츠를 쉽게 탐색할 수 있습니다. 


    • 세계화(Globalization)

      FlexGrid 콘텐츠의 표시 형식을 지정할 수 있는 세계화 클래스가 있습니다. FlexGrid가 데이터를 표시하는 데 사용하는 언어를 선택할 수 있을 뿐만 아니라 날짜와 숫자를 표시하는 방식도 지정할 수 있습니다.


    • 언어 방향

      일부 언어는 콘텐츠를 페이지의 오른쪽에서 왼쪽으로 렌더링합니다. HTML은 dir 속성을 사용하여 이를 수용합니다. 콘텐츠를 오른쪽에서 왼쪽으로 표시하도록 설정된 요소 내에 FlexGrid를 배치합니다. FlexGrid는 동일한 방식으로 콘텐츠를 표시합니다.


      • 우측에서 좌측으로 - 데모

    데이터 찾기

    • 필터링

      Flexgrid는 표준 텍스트 및 강조 표시에서 Excel과 유사한 필터링에 이르기까지 여러 필터 옵션을 지원합니다. OData 원본에서 데이터를 로드할 때 서버 쪽 필터링을 사용합니다.


    • 검색

      전체 텍스트 검색을 수행할 수 있습니다. 즉, 데이터를 필터링하여 데이터 그리드에서 찾은 일치하는 모든 인스턴스를 표시할 수 있습니다. 스캔한 텍스트와 일치하는 항목을 모두 강조 표시할 수 있습니다.


    데이터 분석

    • 그룹화

      Wijmo의 JavaScript 데이터 그리드인 FlexGrid를 사용하면 CollectionView를 통해 데이터를 그룹화할 수 있습니다. 단일 DataGrid에 여러 그룹을 설정하고 Outlook 스타일의 GroupPanel을 구현하여 사용자가 열을 드래그 앤 드롭하여 그룹을 만들 수 있도록 합니다.


    • 집계

      데이터를 집계하여 전체 DataGrid 또는 개별 섹션의 행과 열에 대한 요약 정보를 표시합니다. 집계된 데이터가 표시되는 위치를 설정하고, 사용자 지정 집계를 만들고, 기본 제공 함수 및 형식 옵션을 활용할 수 있습니다.


            데이터 초과 | 데이터 미만

    계층적 그리드

    • TreeGrid

      하위 항목을 데이터 그리드에 바인딩하여 데이터를 표시할 TreeGrid를 생성할 수 있습니다. TreeGrid는 바운드 및 언바운드 모드, 성능 향상을 위한 데이터 지연 로드, 표시할 XML 데이터 가져오기를 모두 지원합니다.


    • 마스터-상세

      FlexGrid를 사용하면 마스터-디테일 모델과 RowDetail 사용을 통해 계층적 데이터를 볼 수 있습니다. 마스터-디테일 모델을 사용하여 FlexGrid 내부의 항목을 선택하고 해당 세부 정보를 보거나 RowDetail을 사용하여 FlexGrid의 행 내에서 데이터를 중첩할 수 있습니다.


    가져오기 / 내보내기 / 인쇄

    • Excel 가져오기/내보내기

      비즈니스에서 데이터 관리를 위해 Excel을 사용하는 경우 FlexGrid를 사용하여 XLSX 파일을 가져오고 FlexGrid 데이터를 XLSX 파일로 내보내 Excel에서 볼 수 있습니다. FlexGrid는 또한 동기식 및 비동기식 데이터 내보내기를 모두 지원하며 FlexGrid 및 Excel에서 설정한 서식 및 스타일을 유지하는 기능이 있습니다.


    • PDF 내보내기

      FlexGrid는 콘텐츠 내보내기 및 PDF 형식 지정을 지원합니다. 이를 통해 브라우저에서 데이터를 볼 수 있을 뿐만 아니라 새로 만든 PDF에 FlexGrid를 추가할 수도 있습니다. FlexGrid를 포함하도록 PDF 및 보고서를 수정합니다.


    • 클립보드

      FlexGrid를 사용하면 선택한 행 또는 셀 데이터를 기본 제공 지원을 통해 클립보드에 복사할 수 있습니다. 클립보드는 여러 FlexGrid의 이벤트를 사용하여 클립보드 작업을 사용자 정의할 수 있는 기능을 제공합니다.


    • 인쇄

      FlexGrid는 내보내기 옵션으로 프린터 사용을 지원하므로 DataGrid를 인쇄를 지원하는 형식으로 변환할 수 있습니다. FlexGrid의 PrintDocument 클래스를 사용하면 데이터 그리드를 테이블 요소로 변환한 다음 페이지에 렌더링하고 인쇄할 수 있습니다.


    JavaScript 데이터 그리드 활용 Tips

    가장 인기 있는 컨트롤이자 빠르고 유연한 특징을 가진 FlexGrid의 기본 기능에 대해 알아보세요!

    FlexGrid의 외관을 사용자 정의하는 방법에 대해 알아 설명합니다.

    필터, 그룹화, 페이징 등 FlexGrid의 사용성을 향상시키는 편리한 기능을 알아보세요!

    무엇이든 물어보세요!

    MESCIUS의 전문가 그룹에게 Wijmo에 대한 막연한 고민과 궁금증을 들려주세요.
    여러분들의 고민을 함께 공감하고 도움을 드리겠습니다. 

    온라인 제품 상담 개발자 포럼(기술 지원)

    Wijmo 튜토리얼

    데모를 확인하실 수 있으며, 튜토리얼을 통해 실제 구현 방법도 학습하실 수 있습니다.


    Angular, React, Vue 프레임워크 별 코드를 제공합니다.

    온라인 튜토리얼 바로가기

    Wijmo 라이브러리 레퍼런싱

    Wijmo 컨트롤을 쉽게 커스터마이즈해 보세요!

    Wijmo CSS 테마 디자이너를 이용하여 디자인 테마를 쉽게 생성하고 만들어진 CSS를 여러분의 위즈모 컨트롤에 적용해 보세요!

    Wijmo CSS 테마 디자이너 사용

    Wijmo 컨트롤 속성 편집기를 통해 Wijmo 컨트롤들의 설정을 쉽게 변경해보세요. 20가지 이상의 컨트롤들의 설정 값을 수정하고 확인해 볼 수 있습니다. 별도의 코딩 작업 없이도, 해당 설정을 다운로드 받아 여러분의 웹에 쉽고 빠르게 바로 적용이 가능합니다.

    Wijmo 컨트롤 속성 편집기 사용

    Our Customers

    여기스터디

    스마트 온라인 교육 학사 관리 솔루션

    #교육 #리포트 #대시보드

    SW개발업체 I사

    온라인 커머스 AI 빅데이터 분석 솔루션

    #유통 #Excel #대시보드

    그로스

    인프라 스트럭쳐 솔루션

    #SW개발 #제조 #대시보드

    도입 사례

    더 많은 MESCIUS 제품 도입 사례를 살펴보세요.

    Wijmo 가격 및 라이선스

    Wijmo의 UI 컨트롤을 활용하여 JavaScript 기반 웹 솔루션을 만들고자 하시는 경우, 개발자 라이선스와 배포 라이선스를 모두 구매하셔야 합니다.

    * 모든 금액은 VAT 제외 금액입니다.

    개발자 라이선스

    Wijmo 정식 자바스크립트 라이브러리를 사용하기 위해 필요한 라이선스입니다.

    ￦1,494,000

    * 개발자 1명 당 1copy를 구매하셔야 합니다.

    배포 라이선스

    Wijmo의 컨트롤을 서버에 배포하기 위해 필요한 라이선스로, 최종적으로 서비스하는 도메인 주소 또는 IP 주소 각각에 대해서 구매가 필요합니다.

    ￦1,000,000

    * 한번 등록된 도메인 및 IP는 수정이 불가합니다.

    * 요청 전에 반드시 최종 확인을 해주세요.

    배포 키 발급 신청

    Wijmo 컨트롤을 서버에 배포하기 위해서는 배포 라이선스를 구매한 후 배포 키를 발급 받으셔야 합니다.

    배포 키 발급 포털을 통해 배포 키를 신청해 주세요.

    도입 문의

    Wijmo 도입 시 더욱 자세한 제품 및 구매 상담이 필요하신 경우 편하신 방법으로 연락 바랍니다.

    구매 절차

    구매 절차의 각 단계에 대한 자세한 내용을 보시려면 각 버튼을 클릭해주세요.

    • 1. 가격 확인 및 견적 요청

      아래의 방법 중 편하신 방법으로 견적서를 요청하실 수 있습니다.


    • 2. 발주 요청

      하기 세가지 항목을 Email(sales-kor@mescius.com)로 발송해 주세요.


      1. 서명 완료된 견적서 (담당자 사인 또는 회사 직인)
      2. 사업자 등록증 사본(회사일 경우)
      3. End-User 정보

                1) 회사명(한글) : 

                2) 회사명(영문) : 

                3) 우편번호 : 

                4) 주소(한글) : 

                5) 주소(영문) : 

                6) 담당자(한글/영문) : 

                7) 전화번호 : 

                8) E-mail : 


      발주 요청을 주시면 이메일을 통해 인보이스를 발송해드립니다.

    • 3. 결제

      은행 입금


      받으신 인보이스에 표기되어 있는 계좌 번호로 입금해주세요.



      카드 결제


      카드 결제는 유선상으로 진행됩니다. 결제에 필요한 결제 전용 전화번호와 납부번호는 메일로 따로 전달 드리며, 전달 받으신 결제 전용 전화번호로 직접 전화를 하시어, 카드 결제를 진행하실 수 있습니다.

    • 4. 라이선스 발급 & 세금 계산서 발행

      결제 확인 후 라이선스 발급 안내 메일을 발송해 드립니다. 이후 세금 계산서를 발행해 드립니다.


      * Wijmo 컨트롤을 서버에 배포하기 위해서는 배포 라이선스를 구매한 후 배포 키를 발급 받으셔야 합니다. 배포 키 발급 포털을 통해 배포 키를 신청해 주세요.


    Web 개발자를 위한 컨트롤

    • SpreadJS

      순수 JavaScript 기반 Web-Excel 컴포넌트
      • Excel 가져오기/내보내기 지원
      • 450+ Excel 함수 지원
      • Angular, React, VueJS 지원
      더 알아보기

    • ActiveReportsJS

      JavaScript 기반 비즈니스 리포팅 컴포넌트
      • Angular, React, Vue 지원
      • 크로스플랫폼을 지원하는 디자이너 프로그램 제공 
      • JavaScript 리포트 뷰어 제공
      더 알아보기

    • Forguncy

      코딩 없이 Excel로 만드는 비즈니스 웹 개발 솔루션
      • Excel 기능으로 쉽고 빠르게 웹 구현
      • HTML & CSS 없이 시작하는 웹 개발
      • 데이터 취합 및 통합 솔루션
      더 알아보기

    • DsExcel

      고성능 Java&Kotlin / .NET 기반 Excel 스프레드시트 API 라이브러리
      • 스프레드시트 생성, 로드, 편집, 저장
      • 스프레드시트 구문 분석, 변환, 공유
      • 수식 계산 및 셀 서식 지정
      DsExcel Java 알아보기
      DsExcel .NET 알아보기