GaramX

사용자 도구

사이트 도구

현재 위치: home » pingpong » datagrid
추적:
pingpong:datagrid

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
pingpong:datagrid [2022/08/22 12:49] – [scrollTop(ST)와 scrollBarTop(BT)] taekgupingpong:datagrid [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 +===== Data Grid =====
  
 +[[https://www.angularminds.com/blog/article/15-useful-javascript-based-data-grid-libraries-for-web-app-development.html|유용한 DataGrid들]]
 +
 +[[https://github.com/mleibman/SlickGrid/wiki|SlickGrid - Old]]
 +[[https://github.com/6pac/SlickGrid|SlickGrid]]
 +[[http://slickgrid.net|SlickGrid Homepage]]
 +[[https://www.beyondjava.net/how-to-use-a-javascript-datatable-in-an-angular-application|angular datatable]]
 +[[https://github.com/guyonroche/exceljs|ExcelJS]]
 +[[https://github.com/SheetJS/js-xlsx|Js-Xlsx]]
 +[[https://github.com/TonyGermaneri/canvas-datagrid|Canvas-DataGrid]]
 +===== axui-datagrid =====
 +출처 : [[https://medium.com/chequer/react-datagrid-component-제작기-with-es6-typescript-4efcbfe1b442|React datagrid component제작기 (with ES6,TypeScript,React)]]
 +
 +https://github.com/jsdevkr/datagrid
 +
 +==== 필수기능 ====
 +사용자가 데이터 그리드를 통해 얻고자하는 경험이 결국 '엑셀'과 비슷하므로 데이터그리드는 상당히 많은 기능을 제고하고 있다. 그 기능이 워낙 방대해서 딱히 표준은 없지만 최소 다음 10가지 정도의 기능을 만족해야 DataGrid로서 가치가 있다고 생각한다.
 +
 +  * 원하는 영역 선택 후 클립보드에 저장하기
 +  * 데이터 정렬
 +  * 데이터 필터링
 +  * 특정 데이터를 간단하게 수정하기(inline edit)
 +  * 셀의 데이터를 서식에 맞게 보여주기(formatter)
 +  * 셀에 수식적용하기(formatter)
 +  * click, keyDown이벤트등에 따라 특정 작업 수행하기
 +  * 멀티컬럼헤더(이것 한국인들만 원하는 게 아닐까...)
 +  * 특정열 또는 행까지 틀고정
 +  * 컬럼의 너비 조정
 +  * 데이터 그룹화 기능
 +  * 데이터 소계 및 합계
 +
 +사람들은 MS사의 엑셀에 매우 익숙해져 있고 이와 비슷한 경험을 웹에서 하고 싶어 하므로 빠른 로딩, 부드러운 스크롤링, 풍부한 기능을 모두 담으면서도 동시에 컴포넌트를 사용하는 개발자들이 쉽고 간편하게 사용할 수 있도록 인터페이스를 설계해야 한다. 따라서 요구사항 수집 및 분석, 설계단계에서부터 많은 고민을 시작할 수 밖에 없다.
 +
 +===== DOM 엘리먼트 구조설계 =====
 +==== 처음 ====
 +{{pingpong:datagrid:dom_element.png|설계1단계}}
 +==== 두번째 ====
 +
 +{{pingpong:datagrid:design_2.png?1846|설계2단계}}
 +==== Scroll-container와 scroll ====
 +
 +{{pingpong:datagrid:scroll.png|scroll-container와 scroll}}
 +==== scrollTop(ST)와 scrollBarTop(BT) ====
 +
 +{{pingpong:datagrid:st_bt.png?700|scrollTop(ST)와 scrollBarTop(BT)}}
 +scrollTop(ST)와 scrollBarTop(BT)를 구하기 위해서는 약간의 수학지식이 필요하다. scrollContainerHeight(SCH), scrollHeight(SH)와 scrollBarContainerHeight(BCH), scrollBarHeight(BH)의 비율이 ST와 BT의 비율과 동일하다는 원리를 이용하면 된다.
 +          
 +<code javascript>
 +ST : SH - SCH = BT : BH - BCH
 +BT = ST * (BH - BCH) / (SH - SCH)
 +ST = (SH - SCH) * BT / (BH - BCH)
 +          </code>
 +
 +==== 프로젝트폴더구성 ====
 +^  프로젝트 루트 폴더의 구성  ^^
 +|src |컴포넌트 소스 폴더 |
 +|dev |테스트와 샘플사이트 개발용 폴더 |
 +|dist |npm배포를 위한 폴더 |
 +|docs |[[http://axui-datagrid.axisj.com|axui-datagrid.axisj.com서비스를 위한 폴더]]|
 +
 +^  src 컴포넌트 소스 폴더 ^^
 +|@types||
 +|assets||
 +|axui-datagrid||
 +|components||
 +|examples||
 +|pages||
 +|routes||
 +|styles||

문서 도구