pingpong:datagrid

차이

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

차이 보기로 링크

--- pingpong:datagrid [2019/01/04 11:13] – [Data Grid] taekgu
+++ pingpong:datagrid [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 33: / 줄 33: @@
 사람들은 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
 BT = ST * (BH - BCH) / (SH - SCH)

pingpong/datagrid.1546600439.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)