PivotGrid 사용자 정의 React 피벗 테이블 및 패널을 만드는 방법
페이지 정보
작성자 GrapeCity 작성일 2023-02-22 15:49 조회 427회 댓글 0건본문
관련링크
문서에서는 Wijmo의 React PivotGrid를 구현하는 방법에 대해 설명했습니다. 그러나 라이브러리를 설치하고 몇 줄의 코드를 작성하며 응용 프로그램을 컴파일하는 것만큼 쉬운 일은 아닙니다. 응용 프로그램의 디자인에 완벽하게 맞출 수 있도록 라이브러리 컴포넌트의 모양 및 느낌을 업데이트해야 할 수 있습니다.
HTML 템플릿 만들기
피벗 패널 컨트롤 스타일 지정
React 피벗 테이블 사용자 정의 CSS
코드를 검토하는 동안 따라 하고 싶으면 를 시작점으로 사용하겠습니다. 완료된 코드를 보고 싶으면 문서 끝에서 해당 리포지토리를 찾아볼 수 있습니다. 이제 시작해 보겠습니다!
HTML 템플릿 만들기
템플릿을 만들기 전에 먼저 변경해야 할 몇 가지 항목이 있습니다. App.js 파일에서 FlexChart 컴포넌트를 초기화하는 선을 제거할 수 있습니다.
이 응용 프로그램에서는 필요하지 않습니다. 마크업은 다음과 같이 표시됩니다.
<div className="App"> <div className='flextable'> <wjcOlap.PivotPanel itemsSource={ng}></wjcOlap.PivotPanel> <wjcOlap.PivotGrid itemsSource={ng}></wjcOlap.PivotGrid> </div> </div>
다음으로, App.css 파일을 열고 다음 CSS 클래스를 수정합니다.
.App { margin: 30px; } .flextable { display: flex; }
마지막으로 index.css 파일을 열고 다음 사항이 포함되어 있는지 확인합니다.
.wj-pivotgrid { height: 600px; width: 1200px; } .wj-pivotpanel { height: 400px; width: 650px; margin: 0px 10px 0px 0px; padding: 10px; padding-right: 20px; display: block; }
이제 응용 프로그램을 저장하면 PivotPanel은 다음과 같이 표시됩니다.
따라서 여기서부터 시작하겠습니다. 이 응용 프로그램에 대해 수행하려는 작업은 패널에 다크 모드 스타일을 제공하고 사용자가 필드를 끌어올 수 있는 영역을 더 잘 정의하는 것입니다. 이 작업을 위해 가장 먼저 할 일은 일부 사용자 정의 HTML을 작성하는 것입니다.
PivotPanel 컨트롤을 사용하면 사용자 정의 HTML 템플릿을 만들 수 있으며 이를 PivotPanel의 controlTemplate 속성에 할당할 수 있습니다. 이 작업은 OLAP 모듈이 PivotPanel을 렌더링할 때 사용하는 기본 템플릿을 재정의합니다.
App.js 파일을 열고 다음 코드를 추가합니다.
wjOlap.PivotPanel.controlTemplate = `<div class="root"> <div class="field-list-label"> <label wj-part="g-flds"></label> </div> <div class="field-list pad"> <div wj-part="d-fields"></div> </div> <div class="drag-areas-label"> <label wj-part="g-drag"></label> </div> <div class="filter-list pad"> <label> <span class="wj-glyph wj-glyph-filter"></span> <span wj-part="g-flt"></span> </label> <div wj-part="d-filters"></div> </div> <div class="column-list pad bdr-left"> <label> <span class="wj-glyph">⫴</span> <span wj-part="g-cols"></span> </label> <div wj-part="d-cols"></div> </div> <div class="row-list pad bdr-top"> <label> <span class="wj-glyph">≡</span> <span wj-part="g-rows"></span> </label> <div wj-part="d-rows"></div> </div> <div class="values-list pad bdr-left bdr-top"> <label> <span class="wj-glyph">Σ</span> <span wj-part="g-vals"></span> </label> <div wj-part="d-vals"></div> </div> <div wj-part="d-prog" class="progress-bar"></div> <div class="control-area"> <label> <input wj-part="chk-defer" type="checkbox"> <span wj-part="g-defer">Defer Updates</span> </label> <button wj-part="btn-update" class="wj-btn wj-state-disabled" type="button" disabled> Update </button> </div> </div>`;
이제 여기에 많은 항목이 있지만 지금 보고 있는 것에 대해 이해하고 있다면 매우 간단합니다. PivotPanel은 필드, 영역, 컨트롤 영역의 세 가지 섹션으로 나뉩니다. 필드 섹션은 선택 가능한 필드 요소 목록으로 구성됩니다. 영역 섹션은 4개의 하위 섹션(필터, 열, 행, 값)으로 나뉩니다. 컨트롤 영역은 React 피벗 테이블이 자동으로 업데이트되지 않도록 사용자가 사용할 수 있는 항목입니다.
여기에 작성한 마크업은 일부 핵심 CSS 클래스(예: .wj-glyph 및 .wj-btn)를 사용하지만 이 HTML은 대부분의 스타일을 완전히 제거하여 작업할 빈 슬레이트를 제공합니다. 응용 프로그램을 저장하여 실행하면 업데이트된 패널이 표시됩니다.
이제 이러한 모든 부분을 사용하고 사용자 정의 CSS를 추가할 수 있습니다. 문서의 다음 섹션에서 여기로 이동하겠습니다.
피벗 패널 컨트롤 스타일 지정
이제 컨트롤의 스타일을 지정할 준비가 되었으며 앱의 디자인을 결정할 차례입니다. 이 앱의 경우 다크 테마에 맞게 컨트롤을 수정합니다. 이 작업을 위해 다음의 세 가지 색을 사용하여 응용 프로그램의 스타일을 지정하겠습니다.
#141414(기본 색)
#333333(보조 색)
#595959(제3색)
색을 변경하기 전에 피벗 패널 컨트롤의 레이아웃을 설정해야 합니다. 필드 목록이 컨트롤의 왼쪽을 차지하게 하고 2x2 그리드의 오른쪽에 필드 영역을 배치하여 레이아웃이 표시되도록 할 수 있습니다.
이 작업을 위해 PivotPanel의 디스플레이를 그리드에 설정하고 4개의 열을 보유하도록 설정하겠습니다.
.wj-pivotpanel .root { display: -ms-grid; display: grid; grid-template-columns: repeat(4, 25%); height: 100%; }
다음으로, 영역 레이블의 스타일을 적절히 지정해야 합니다.
.wj-pivotpanel .field-list-label { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 1; grid-row: 1; } .wj-pivotpanel .drag-areas-label { -ms-grid-column: 3; -ms-grid-column-span: 2; grid-column: 3/span 2; -ms-grid-row: 1; grid-row: 1; }
보시다시피 이러한 각 요소는 그리드의 첫 번째 행에서 시작되며 field-list-label은 첫 번째 열에서 시작되고 drag-areas-label은 세 번째 열에서 시작됩니다.
다음으로, 레이블과 같이 컨트롤에서 필드 및 필드 영역 위치를 할당해야 합니다.
.wj-pivotpanel .field-list { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 2; -ms-grid-row-span: 2; grid-row: 2/span 2; border: 1px solid rgba(0, 0, 0, .2); margin-top: 5px; height: 322px; } .wj-pivotpanel .filter-list { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 2; grid-row: 2; height: 95%; border: 1px solid rgba(0, 0, 0, .2); margin: 5px; } .wj-pivotpanel .column-list { -ms-grid-column: 4; grid-column: 4; -ms-grid-row: 2; grid-row: 2; height: 95%; border: 1px solid rgba(0, 0, 0, .2); margin: 5px; margin-left: 10px; } .wj-pivotpanel .row-list { -ms-grid-column: 3; grid-column: 3; -ms-grid-row: 3; grid-row: 3; height: 95%; border: 1px solid rgba(0, 0, 0, .2); margin: 5px; } .wj-pivotpanel .values-list { -ms-grid-column: 4; grid-column: 4; -ms-grid-row: 3; grid-row: 3; height: 95%; border: 1px solid rgba(0, 0, 0, .2); margin: 5px; margin-left: 10px; }
여기에는 많은 CSS가 있지만 생각하는 것만큼 복잡하지 않습니다. 단순히 만든 그리드의 섹션에 모든 다른 목록을 배치하는 것입니다. 각 요소에 대해 그리드 행 및 열 위치를 설정하고 일부 여백과 테두리를 추가하면 끝입니다!
응용 프로그램을 실행하기 전에 다른 두 가지 작업을 먼저 수행해야 합니다. PivotPanel 컨트롤은 많은 데이터와 사용자가 푸시하기로 결정할 때까지 업데이트를 연기하는 기능을 사용하는 경우에 대해 진행률 표시줄을 지원합니다. 이는 PivotPanel의 기능이므로 스타일이 지정되어 있는지도 확인해야 합니다.
필드 및 목록과 같이 CSS로 구현하는 작업은 매우 간단합니다.
.wj-pivotpanel .progress-bar { -ms-grid-column: 1; -ms-grid-column-span: 4; grid-column: 1/span 4; -ms-grid-row: 4; grid-row: 4; width: 0px; height: 3px; } .wj-pivotpanel .control-area { -ms-grid-column: 1; -ms-grid-column-span: 4; grid-column: 1/span 4; -ms-grid-row: 4; grid-row: 4; display: -ms-grid; display: grid; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; }
두 번째는 모든 필드 영역의 높이가 같은지 확인하고 업데이트 연기를 위해 비활성화/활성화된 버튼 레이아웃을 설정하는 것입니다.
.wj-pivotpanel .pad { padding: 6px; } .wj-pivotpanel .values-list .wj-flexgrid { height: 118px; } .wj-pivotpanel .filter-list .wj-flexgrid { height: 118px; } .wj-pivotpanel .column-list .wj-flexgrid { height: 118px; } .wj-pivotpanel .row-list .wj-flexgrid { height: 118px; } .wj-control a.wj-btn, .wj-viewer .wj-control a.wj-applybutton, .wj-control button.wj-btn:not(.wj-btn-default), .wj-viewer .wj-control button.wj-applybutton:not(.wj-btn-default) { border: 1px solid rgb(66, 66, 66); border-style: solid; color: white; background-color: #3f51b5; } .wj-control a.wj-btn:hover, .wj-viewer .wj-control a.wj-applybutton:hover, .wj-control button.wj-btn:not(.wj-btn-default):hover, .wj-viewer .wj-control button.wj-applybutton:not(.wj-btn-default):hover { border: 1px solid rgb(66, 66, 66); border-style: solid; color: white; background-color: #5d6fd4; }
이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.
보시다시피 그 어느 때보다 확실히 더 간결하고 컨트롤에서 어떠한 정보도 손실되지 않습니다.
다음 섹션으로 이동하기 전에 마지막 작업은 다크 모드 테마에 맞게 컨트롤의 스타일을 지정했는지 확인하는 것입니다. 이 섹션의 시작 부분에서는 사용할 색 팔레트를 언급했지만 이제는 이를 구현할 차례입니다. 다음 요소에서 CSS를 업데이트합니다.
body { margin: 0; background: #141414; } .wj-pivotpanel { min-height: 0; height: 400px; width: 650px !important; margin: 0px 10px 0px 0px; display: block; background: #333; color: white; padding: 10px; padding-right: 20px; } .wj-pivotpanel .wj-flexgrid { min-height: 4em; max-height: 310px; background: inherit; color: white; }
이제 응용 프로그램을 저장하고 다시 실행하면 다음 내용을 볼 수 있습니다.
보시다시피 PivotPanel은 컨트롤 스타일 지정을 시작했을 때 원했던 모양 및 느낌과 일치합니다. 다음 섹션에서는 다크 모드 테마와 일치하도록 Wijmo의 React 피벗 테이블인 PivotGrid를 업데이트하겠습니다.
React 피벗 테이블 사용자 정의 CSS
마지막으로 처리해야 할 작업은 앱의 테마를 확인하도록 피벗 테이블의 디자인을 일치시키는 것이며 이 작업은 아주 쉬워야 합니다.
index.css 파일을 열고 .wj-pivotgrid 클래스를 다음과 같이 수정합니다.
.wj-pivotgrid { height: 600px; width: 1200px; border: 1px sold #333; background: #333; }
이제 그리드 컨테이너는 나머지 앱의 디자인에 맞습니다. 하지만 아직 끝나지 않았습니다! 셀의 스타일도 적절히 지정해야 합니다. 이 작업을 위해 다음 CSS를 추가합니다.
.wj-cell { background: #333; color: white; } .wj-cell.wj-header { background: #595959; color: white; } .wj-cell.wj-aggregate { background: #595959 !important; color: white; } .wj-cell.wj-align-right.wj-aggregate { background: #595959 !important; }
데이터 셀과 헤더 셀의 스타일을 모두 지정합니다. 응용 프로그램을 실행하고 몇 개의 필드를 추가한 다음 피벗 테이블을 살펴보면 다음과 같이 표시됩니다.
다 끝났습니다! 응용 프로그램의 디자인과 일치하도록 Wijmo의 React 피벗 테이블인 PivotGrid의 디자인을 사용자 정의하는 작업은 쉽습니다.
결론
축하합니다! 이제 이 문서를 살펴봤으니 Wijmo의 PivotPanel 및 PivotGrid 컨트롤을 사용자 정의하고 스타일 지정하는 데 문제가 없어야 합니다. 패널 레이아웃을 사용자 정의하는 방법과 레이아웃 또는 스타일 구성표에 맞도록 이러한 컨트롤을 사용자 정의하는 방법을 보여드렸습니다.
이 문서에서 응용 프로그램을 다운로드하려면 에서 프로젝트를 포함하는 리포지토리를 찾아볼 수 있습니다.
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.