FlexGrid 사용자 정의 가능한 JavaScript 데이터 그리드를 빠르게 구축하는 방법
페이지 정보
작성자 MESCIUS
작성일 2024-01-03 08:39 조회 80회
댓글 0건
본문
관련링크
, FlexGrid는 성능이 뛰어난 최고의 데이터 그리드 UX를 제공합니다.
Wijmo는 FlexGrid 및 기타 Wijmo 컨트롤을 기본 프레임워크 컴포넌트로 노출하는 thin wrappers(씬 래퍼)를 포함하여 모든 주요 JavaScript 프레임워크(Angular, React 및 Vue)를 지원합니다.
Wijmo FlexGrid의 유연성을 보여주기 위해 이 포스팅에서는 JavaScript 데이터 그리드를 빠르고 쉽게 빌드해볼 것입니다.
목적은 프레임워크를 비교하는 것이 아닌, 사용자가 선택한 프레임워크와 다른 Wijmo 컨트롤이 어떻게 쉽고 원활하게 통합되는지 보여 주기 위함입니다. (물론 프레임워크 없이 일반 JavaScript 또는 TypeScript와 함께 Wijmo를 사용할 수 있습니다.)
일반 JavaScript를 이용하여 '2023 Sedans'라는 간단한 응용 프로그램을 구현하는 방법을 설명하고, 다른 게시물에서 , 및 응용 프로그램을 만들어 보겠습니다.
앱은 자동차에 대한 정보(제조업체, 모델, 가격)가 포함된 일부 JSON 데이터를 로드하고 축소 가능한 그룹, 데이터 집계 및 열 필터링을 사용하여 그리드에 표시합니다.
화면에는 앱의 일반 JavaScript 버전이 표시됩니다.
앱은 27개 제조업체의 자동차 모델 129개를 가격과 함께 표시합니다.
항목은 제조업체 별로 그룹화 됩니다.
그룹 헤더에는 항목 개수와 평균 가격이 표시됩니다.
사용자는 하나 이상의 모델을 선택하고 선택한 모델을 클립보드에 복사할 수 있습니다.
그룹 및 가격 별로 목록을 필터링 할 수 있습니다.
를 작동하여 순수한 JavaScript를 사용해 앱에서 사용자 정의 가능 데이터 그리드를 빌드해 보겠습니다.
이 앱은 '2023 Sedans' 앱의 일반 JavaScript 버전으로 소스 코드와 미리 보기는 이곳에서 확인하실 수 있습니다.
샘플은 를 사용해 만들었으므로 유지 관리하고 공유하기 쉽습니다.
일반 JavaScript 앱 만들기
앱의 사본을 만들려면 다음 단계를 따르십시오.
를 엽니다.
화면 하단에서 'JavaScript/Blank Project' 버튼을 클릭합니다.
'wijmo'를 종속성 목록에 입력하여 프로젝트에 Wijmo를 추가합니다.
HTML 만들기
index.html 파일은 응용 프로그램의 UI를 정의합니다.
<!-- index.html --> <h1> 2023 Sedans (Plain JavaScript) </h1> <p> Sort by model and price …</p> <p> Showing <b id="models">0</b> models from <b id="makes">0</b> makes.</p> <div id="theGrid"></div>
'theGrid' 요소는 FlexGrid를 호스팅합니다.
'models' 및 'makes' 요소는 모델 및 제조업체 수를 표시하며 데이터가 로드되고 필터링될 때 업데이트됩니다.
앱 스타일 지정
앱의 스타일을 지정하려면 styles.css 파일을 다음과 같이 수정하세요.
/* styles.css */
body {
font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
max-height: 300px;
max-width: 32em;
}필수 모듈을 가져오기
이 코드를 index.js 파일에 추가하여 앱에서 필요한 클래스와 스타일을 가져옵니다.
// index.js
import './style.css';
import { CollectionView } from 'wijmo/wijmo'; // hold the data
import { FlexGrid } from 'wijmo/wijmo.grid'; // show the data
import { FlexGridFilter } from 'wijmo/wijmo.grid.filter'; // filter the data
import 'wijmo/styles/themes/wijmo.theme.material.css'; // material theme이 코드는 CollectionView, FlexGrid, FlexGridFilter 클래스 및 Wijmo의 머티리얼 테마를 가져옵니다.
데이터 소스 추가
데이터를 그룹화된 CollectionView에 로드하려면 index.js 파일에 다음 코드를 추가합니다.
var data = new CollectionView([], {
// grouped CollectionView
groupDescriptions: ['make'],
});
data.sourceCollection = sedanData;
updateCounts();
// update model and make counts
function updateCounts() {
document.getElementById('models').textContent = data.items.length;
document.getElementById('makes').textContent = data.groups.length;
}이 코드는 'make' 별로 그룹화된 CollectionView를 만든 다음, 가져오기 API를 사용하여 JSON 데이터 소스로부터 데이터를 비동기식으로 로드합니다.
데이터가 로드되면, 이를 CollectionView의 sourceCollection 속성에 할당하고 모델을 업데이트하며 페이지에서 개수 요소를 만듭니다.
FlexGrid 추가
하단의 코드를 index.js 파일에 추가하여 FlexGrid를 만들고 데이터를 표시합니다.
// index.js
var theGrid = new FlexGrid('#theGrid', {
allowResizing: 'None',
showAlternatingRows: false,
isReadOnly: true,
selectionMode: 'ListBox',
headersVisibility: 'Column',
autoGenerateColumns: false,
columns: [
{binding:'make', header:'Make', width:"*", visible:false},
{binding:'model', header:'Model', width:"*"},
{binding:'price', header:'Price', width:".5*", format: 'c0',
aggregate: 'Avg'},
],
itemsSource: data
});
var filter = new FlexGridFilter(theGrid, {
filterApplied: (s, e) => {
updateCounts();
}
});이 코드는 를 인스턴스화 및 초기화하고, itemsSource 속성을 이전 단계에서 만든 CollectionView로 설정합니다.
또한 binding, header, format 및 width 속성을 지정하여 그리드의 열을 정의합니다.
이 코드는 또한 'price' 열의 aggregate 속성을 'Avg'로 설정하여 그룹 헤더 행에 각 제조업체에 대한 평균 가격이 표시됩니다.
마지막으로, 코드에서 첨부된 FlexGridFilter를 그리드에 첨부하므로 사용자가 Excel과 같은 UI를 사용하여 모델 또는 제조업체를 기준으로 데이터를 필터링할 수 있습니다.
이 코드는 또한 필터의 filterApplied 이벤트에 핸들러를 첨부하여 페이지의 모델 및 제조업체 수를 업데이트합니다.
일반 JavaScript 응용 프로그램 실행
완료되었습니다!
'2023 Sedans' 앱의 일반 JavaScript 버전이 준비되어 있으니, 에서 확인해 보세요.
다른 프레임워크에서 데이터 그리드를 빌드하는 방법에 대해 알아보세요!
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
