[#1106] Grid > 선택된 row로 스크롤 이동

docs/views/grid/example/Toolbar.vue

@@ -22,6 +22,7 @@
         style: {
           stripe: stripeMV,
           border: borderMV,
+          highlight: highlightMV,
         },
         page: pageInfo,
       }"
@@ -44,7 +45,7 @@
           class="delete"
           @click="onClickAdd"
         >
-          Add
+          highlight
         </ev-button>
         <ev-button
           type="info"
@@ -162,6 +163,7 @@ export default {
     const checkedRowsMV = ref();
     const clickedRowMV = ref();
     const DbClickedRowsMV = ref();
+    const highlightMV = ref(-1);
     const menuItems = ref([
       {
         text: 'Menu1',
@@ -229,16 +231,17 @@ export default {
     const pageInfo = reactive({
       use: true,
       visiblePage: 7,
-      currentPage: 3,
-      perPage: 7,
+      currentPage: 1,
+      perPage: 12,
       order: 'center',
       showPageInfo: true,
       total: computed(() => tableData.value.length),
       useClient: true,
     });
     getData(30, 0);
     const onClickAdd = () => {
-      tableData.value.push(['oracle', 'LIN12G', 'LIN12G', '10.10.30.10', '2016']);
+      highlightMV.value = 17;
+      // tableData.value.push(['oracle', 'LIN12G', 'LIN12G', '10.10.30.10', '2016']);
     };
     const onRequestData = (e) => {
       pageInfo.currentPage = e.pageInfo.currentPage;
@@ -272,6 +275,7 @@ export default {
       searchVm,
       orderItems,
       pageInfo,
+      highlightMV,
       onCheckedRow,
       onDoubleClickRow,
       onClickRow,

src/components/grid/Grid.vue

@@ -337,7 +337,7 @@ export default {
       (props.option.showHeader === undefined ? true : props.option.showHeader));
     const stripeStyle = computed(() => (props.option.style?.stripe || false));
     const borderStyle = computed(() => (props.option.style?.border || ''));
-    const highlightIdx = computed(() => (props.option.style?.highlight || -1));
+    const highlightIdx = computed(() => (props.option.style?.highlight ?? -1));
     const rowMinHeight = props.option.rowMinHeight || 35;
     const elementInfo = reactive({
       body: null,
@@ -384,6 +384,8 @@ export default {
       showPageInfo: computed(() => (props.option.page?.showPageInfo || false)),
       isClientPaging: computed(() =>
         pageInfo.useClient && pageInfo.usePage && !pageInfo.isInfinite),
+      isHighlight: false,
+      highlightPage: 0,
     });
     const checkInfo = reactive({
       prevCheckedRow: [],
@@ -605,6 +607,23 @@ export default {
         selectInfo.selectedRow = value;
       },
     );
+    watch(
+      () => highlightIdx.value,
+      async (index) => {
+        await nextTick();
+        if (index >= 0) {
+          if (pageInfo.usePage && !pageInfo.isInfinite) {
+            pageInfo.highlightPage = Math.ceil(index / pageInfo.perPage) || 1;
+            if (pageInfo.highlightPage !== pageInfo.currentPage) {
+              pageInfo.currentPage = pageInfo.highlightPage;
+              pageInfo.isHighlight = true;
+              return;
+            }
+          }
+          elementInfo.body.scrollTop = resizeInfo.rowHeight * highlightIdx.value;
+        }
+      },
+    );
     watch(
       () => checkInfo.useCheckbox.mode,
       () => {
@@ -667,14 +686,18 @@ export default {
       }, { immediate: true },
     );
     watch(
-      () => [pageInfo.currentPage, pageInfo.perPage],
-      (currentVal, beforeVal) => {
+      () => pageInfo.currentPage,
+      (current, before) => {
         nextTick(() => {
-          changePage(beforeVal[0]);
-          if (pageInfo.isClientPaging && currentVal[0] !== beforeVal[0]) {
+          changePage(before);
+          if (pageInfo.isClientPaging && current !== before) {
             clearCheckInfo();
           }
           updateVScroll();
+          if (current === pageInfo.highlightPage && pageInfo.isHighlight) {
+            elementInfo.body.scrollTop = resizeInfo.rowHeight * highlightIdx.value;
+            pageInfo.isHighlight = !pageInfo.isHighlight;
+          }
         });
       },
     );

src/components/grid/uses.js

@@ -96,7 +96,7 @@ export const scrollEvent = (params) => {
         firstVisibleIndex = 0;
       }
 
-      const lastVisibleIndex = firstVisibleIndex + rowCount;
+      const lastVisibleIndex = firstVisibleIndex + rowCount + 1;
       const firstIndex = Math.max(firstVisibleIndex, 0);
       const lastIndex = lastVisibleIndex;