| 양쪽 이전 판이전 판다음 판 | 이전 판 |
| pingpong:datagrid [2018/09/16 14:06] – [Data Grid] taekgu | pingpong:datagrid [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1 |
|---|
| [[https://www.angularminds.com/blog/article/15-useful-javascript-based-data-grid-libraries-for-web-app-development.html|유용한 DataGrid들]] | [[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]] | [[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 ===== | ===== axui-datagrid ===== |
| 출처 : [[https://medium.com/chequer/react-datagrid-component-제작기-with-es6-typescript-4efcbfe1b442|React datagrid component제작기 (with ES6,TypeScript,React)]] | 출처 : [[https://medium.com/chequer/react-datagrid-component-제작기-with-es6-typescript-4efcbfe1b442|React datagrid component제작기 (with ES6,TypeScript,React)]] |
| 사람들은 MS사의 엑셀에 매우 익숙해져 있고 이와 비슷한 경험을 웹에서 하고 싶어 하므로 빠른 로딩, 부드러운 스크롤링, 풍부한 기능을 모두 담으면서도 동시에 컴포넌트를 사용하는 개발자들이 쉽고 간편하게 사용할 수 있도록 인터페이스를 설계해야 한다. 따라서 요구사항 수집 및 분석, 설계단계에서부터 많은 고민을 시작할 수 밖에 없다. | 사람들은 MS사의 엑셀에 매우 익숙해져 있고 이와 비슷한 경험을 웹에서 하고 싶어 하므로 빠른 로딩, 부드러운 스크롤링, 풍부한 기능을 모두 담으면서도 동시에 컴포넌트를 사용하는 개발자들이 쉽고 간편하게 사용할 수 있도록 인터페이스를 설계해야 한다. 따라서 요구사항 수집 및 분석, 설계단계에서부터 많은 고민을 시작할 수 밖에 없다. |
| |
| ==== DOM 엘리먼트 구조설계 ==== | ===== DOM 엘리먼트 구조설계 ===== |
| - <wrap>처음 | ==== 처음 ==== |
| {{pingpong:datagrid:dom_element.png?500|설계1단계}}</wrap> | {{pingpong:datagrid:dom_element.png|설계1단계}} |
| - <wrap>두번째 | ==== 두번째 ==== |
| {{pingpong:datagrid:design_2.png|설계2단계}}</wrap> | |
| - <wrap>Scroll-container와 scroll | {{pingpong:datagrid:design_2.png?1846|설계2단계}} |
| {{pingpong:datagrid:scroll.png?700|scroll-container와 scroll}}</wrap> | ==== Scroll-container와 scroll ==== |
| - <wrap>scrollTop(ST)와 scrollBarTop(BT) | |
| {{pingpong:datagrid:st_bt.png?700|scrollTop(ST)와 scrollBarTop(BT)}} | {{pingpong:datagrid:scroll.png|scroll-container와 scroll}} |
| scrollTop(ST)와 scrollBalTop(BT)를 구하기 위해서는 약간의 수학지식이 필요하다. scrollContainerHeight(SCH), scrollHeight(SH)와 scrollBarContainerHeight(BCH), scrollBarHeight(BH)의 비율이 ST와 BT의 비율과 동일하다는 원리를 이용하면 된다. | ==== 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의 비율과 동일하다는 원리를 이용하면 된다. |
| | |
| </wrap><code javascript> | <code javascript> |
| ST : SH - SCH = BT : BH - BCH | ST : SH - SCH = BT : BH - BCH |
| BT = ST * (BH - BCH) / (SH - SCH) | BT = ST * (BH - BCH) / (SH - SCH) |
