[#1080] Grid > Infinite Scroll 추가 (#1081)

Co-authored-by: yell <yell@ex-em.com>
ex-em · Mar 7, 2022 · 4ee195a · 4ee195a
1 parent f5ccd2d
commit 4ee195a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/docs/views/grid/example/Default.vue b/docs/views/grid/example/Default.vue
@@ -25,11 +25,17 @@
           border: borderMV,
           highlight: highlightMV,
         },
+        page: {
+          use: true, // pagination
+          dataCount: 50,
+          isInfinite: true, // use && isInfinite === infinite scroll
+        },
       }"
       @check-row="onCheckedRow"
       @check-all="onCheckedRow"
       @click-row="onClickRow"
       @dblclick-row="onDoubleClickRow"
+      @scroll-end="requestRowData"
     >
       <!-- renderer start -->
       <template #user-icon>
@@ -290,14 +296,14 @@ export default {
       for (let ix = startIndex; ix < startIndex + count; ix++) {
         temp.push([
           `user_${ix + 1}`,
-          `user_${ix + 1}`,
+          ix + 1,
           'Common',
           '010-0000-0000',
           'kmn0827@ex-em.com',
           '2020.08.04 14:15',
         ]);
       }
-      tableData.value = temp;
+      return temp;
     };
     const loadImage = (fileName) => {
       /* eslint-disable global-require */
@@ -309,8 +315,17 @@ export default {
       }
       /* eslint-enable global-require */
     };
+    const requestRowData = () => {
+      if (tableData.value.length < 1000) {
+        const newData = getData(50, tableData.value.length);
+        tableData.value = [
+          ...tableData.value,
+          ...newData,
+        ];
+      }
+    };
 
-    getData(50, 0);
+    tableData.value = getData(50, 0);
     return {
       columns,
       tableData,
@@ -340,6 +355,7 @@ export default {
       onClickRow,
       resetBorderStyle,
       loadImage,
+      requestRowData,
     };
   },
 };

diff --git a/src/components/grid/Grid.vue b/src/components/grid/Grid.vue
@@ -149,7 +149,7 @@
           <tr
             v-for="(row, rowIndex) in viewStore"
             :key="rowIndex"
-            :data-index="rowIndex"
+            :data-index="row[0]"
             :class="{
               row: true,
               selected: row[2] === selectedRow,
@@ -309,6 +309,7 @@ export default {
     'update:checked': null,
     'check-row': null,
     'check-all': null,
+    'scroll-end': null,
   },
   setup(props) {
     const {
@@ -397,12 +398,20 @@ export default {
       gridWidth: computed(() => (props.width ? setPixelUnit(props.width) : '100%')),
       gridHeight: computed(() => (props.height ? setPixelUnit(props.height) : '100%')),
     });
+    const pageInfo = reactive({
+      currentPage: 1,
+      prevPage: 0,
+      startIndex: 0,
+      use: computed(() => (props.option.page?.use || false)),
+      dataCount: computed(() => (props.option.page?.dataCount || 50)),
+      isInfinite: computed(() => (props.option.page?.isInfinite || false)),
+    });
 
     const {
       updateVScroll,
       updateHScroll,
       onScroll,
-    } = scrollEvent({ scrollInfo, stores, elementInfo, resizeInfo });
+    } = scrollEvent({ scrollInfo, stores, elementInfo, resizeInfo, pageInfo });
 
     const {
       onRowClick,
@@ -594,6 +603,7 @@ export default {
       ...toRefs(stores),
       ...toRefs(filterInfo),
       ...toRefs(scrollInfo),
+      ...toRefs(pageInfo),
       ...toRefs(resizeInfo),
       ...toRefs(selectInfo),
       ...toRefs(checkInfo),

diff --git a/src/components/grid/uses.js b/src/components/grid/uses.js
@@ -68,7 +68,8 @@ export const commonFunctions = () => {
 };
 
 export const scrollEvent = (params) => {
-  const { scrollInfo, stores, elementInfo, resizeInfo } = params;
+  const { emit } = getCurrentInstance();
+  const { scrollInfo, stores, elementInfo, resizeInfo, pageInfo } = params;
   /**
    * 수직 스크롤의 위치 계산 후 적용한다.
    */
@@ -93,6 +94,16 @@ export const scrollEvent = (params) => {
       scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
       scrollInfo.vScrollBottomHeight = totalScrollHeight - (stores.viewStore.length * rowHeight)
         - scrollInfo.vScrollTopHeight;
+      if (scrollInfo.vScrollBottomHeight === 0) {
+        pageInfo.prevPage = pageInfo.currentPage;
+        pageInfo.currentPage = Math.ceil(lastIndex / pageInfo.dataCount) + 1;
+        emit('scroll-end', {
+          startIndex: lastIndex,
+          dataCount: pageInfo.dataCount,
+          prevPage: pageInfo.prevPage,
+          currentPage: pageInfo.currentPage,
+        });
+      }
     }
   };
   /**