[#1118] TreeGrid > 그리드 신규 기능 추가 (#1119)

Co-authored-by: yell <yell@ex-em.com>

docs/views/grid/example/Summary.vue

@@ -24,8 +24,7 @@
       }"
     >
       <template #increment_mb="{ item }">
-        {{ `${numberWithComma(item.row[2][item.column.index])}
-        (${item.row[2][item.column.index + 1]}%)` }}
+        {{ getIncrementValue(item) }}
       </template>
     </ev-grid>
     <div class="description">
@@ -115,6 +114,11 @@ export default {
       total: computed(() => tableData.value.length),
       useClient: true,
     });
+    const getIncrementValue = (item) => {
+      const row = item.row[2];
+      const columnIndex = item.column.index;
+      return `${numberWithComma(row[columnIndex])}(${row[columnIndex + 1]}%)`;
+    };
     return {
       columns,
       tableData,
@@ -124,7 +128,7 @@ export default {
       totalSummaryType,
       summaryTypes,
       usedSummaryType,
-      numberWithComma,
+      getIncrementValue,
     };
   },
 };

docs/views/treeGrid/api/treeGrid.md

@@ -16,8 +16,12 @@
     @click-row="onClickRow"
     @dblclick-row="onDoubleClickRow"
 >
+  <template #{필드명}></template>
+  <template #toolbar="{ item }"></template>
 </ev-tree-grid>
 ```
+- `#{필드명}` 지정해서 Cell Render 설정
+- `#toolbar` 지정해서 Toolbar 표시
 
 ### Props
 | 이름 | 타입 | 디폴트 | 설명 | 종류 |
@@ -34,26 +38,56 @@
 |  | rowHeight | 35 | Row 높이를 설정한다. | `min-height: 35` |
 |  | rowMinHeight | null | Row 높이를 `min-height`보다 작게 설정한다. |  |
 |  | columnWidth | 40 | 기본 컬럼 너비를 설정 한다. | `min-width: 40px` |
-|  | useFilter | false | 필터 기능 사용 여부, 컨텍스트 메뉴에서 'Filter On' 메뉴를 클릭하여 설정한다. |  |
 |  | useCheckbox | {} | 각 Row별 체크박스 사용 여부 및 단일 선택이나 다중 선택을 설정한다. |  |
 |  |  | use | 체크박스 사용 여부 | boolean |
 |  |  | mode | 단일 및 다중 선택 설정 | 'multi', 'single' |
 |  |  | headerCheck | 헤더 체크박스 사용 여부 | boolean |
+|  | useSelection | {} | 각 row별 선택 여부 및 단일 선택이나 다중 선택을 설정한다. |  |
+|  |  | use | Selection 사용 여부 | Boolean |
+|  |  | multiple | 다중 선택 설정 여부  | Boolean |
+|  |  | limitCount | 선택 가능한 row의 수를 제한 | Number |
 |  | style | {} | 그리드의 스타일을 설정한다. |  |
 |  |  | stripe | Row의 배경색을 Stripe 스타일로 설정한다. | boolean |
 |  |  | border | 그리드의 Border 여부를 설정한다. | 'none', 'rows' |
 |  |  | highlight | 지정한 Row에 Highlight 효과를 설정한다. | `rowIndex` |
 |  | customContextMenu | [] | 우클릭시 보여지는 컨텍스트 메뉴를 설정한다. |  |
 |  |  | menuItems | 컨텍스트 메뉴 |  |
+|  | page | {} | 페이지 설정 |  |
+|  |  | use | 페이지 사용 여부 | Boolean |
+|  |  | isInfinite | Infinite Scroll 사용 여부 | Boolean |
+|  |  | useClient | client-side Paging 사용 여부 | Boolean |
+|  |  | total | 총 항목 수 | Number |
+|  |  | perPage | 각 페이지의 항목 수 | Number |
+|  |  | currentPage | 현재 페이지 번호 | Number |
+|  |  | visiblePage | 보여지는 Pagination 버튼 수 | Number |
+|  |  | order | Pagination 위치 | 'center', 'left', 'right' |
+|  |  | showPageInfo | 페이지 정보 표시 여부 | Boolean |
+|  | useSummary | false | 하단에 summary row 가 표시 된다. | Boolean |
 |  | expandIcon | 'tree-expand-icon' | expand 상태인 노드의 아이콘 | `ev-icon` |
 |  | collapseIcon | 'tree-expand-icon' | collapse 상태인 노드의 아이콘 | `ev-icon` |
 |  | parentIcon | 'tree-parent-icon' | 자식 노드가 있는 노드의 아이콘 | `ev-icon`, 'none' |
 |  | childIcon | 'tree-child-icon' | 자식 노드가 없는 노드의 아이콘 | `ev-icon`, 'none' |
 
+### Columns
+| 이름 | 타입 | 설명 | 종류 | 필수 |
+| --- | ---- | ----- | ---- | --- |
+| caption | String | 컬럼명 | ex) '인스턴스명' | Y |
+| field | String | 필드명 | ex) 'instance_name' | Y |
+| type | String | 데이터 타입 | 'string', 'number', 'stringNumber', 'float', 'boolean' | Y |
+| hide | Boolean | 컬럼 숨김 여부 | Boolean | N |
+| width | Number | 컬럼 넓이 | ex) 150 | N |
+| searchable | Boolean | 검색 대상 여부 | Boolean | N |
+| align | String | 사용자 지정 정렬 | 'center', 'left', 'right' | N |
+| decimal | Number | 데이터 타입이 float 일 때 소수점 자리 표시 수 | ex) 0~20 (디폴트: 3 ) | N |
+| summaryType | String | 계산 타입 | 'sum', 'average', 'max', 'min', 'count' | N |
+| summaryRenderer | String | Summary 에 표시할 텍스트 또는 계산 값 | ex) 'Sum: {0}' | N |
+| summaryData | Array | Summary 할 대상 추가 시 summaryRenderer 와 함께 사용 | ex) '{0}({1}%)' | N |
+
 ### Event
 | 이름 | 파라미터 | 설명 |
  | ---- | ------- | ---- |
- | check-row | event | Row의 체크박스가 체크 되었을때 호출된다. |
- | check-all | event | 헤더의 체크박스가 체크 되었을때 호출 된다. 전체 Row의 체크박스를 체크한다. |
- | click-row | newValue | Row가 클릭 되었을 때 호출된다. |
- | dblclick-row | newValue | Row가 더블 클릭 되었을 때 호출된다. |
+| check-row | event, row, index | row의 체크박스가 체크 되었을때 호출된다. |
+| check-all | event, rows | 헤더의 체크박스가 체크 되었을때 호출 된다. 전체 row의 체크박스를 체크한다. |
+| click-row | event, row | row가 클릭 되었을 때 호출된다. |
+| dblclick-row | event, row | row가 더블 클릭 되었을 때 호출된다. |
+| page-change | event | page 정보가 변경되었을 때 호출된다. |

docs/views/treeGrid/example/Default.vue

@@ -19,6 +19,7 @@
           mode: checkboxModeMV,
           headerCheck: headerCheckMV,
         },
+        useSelection: useSelection,
         customContextMenu: menuItems,
         style: {
           stripe: stripeMV,
@@ -29,6 +30,8 @@
         collapseIcon: collapseIconMV,
         parentIcon: parentIconMV,
         childIcon: childIconMV,
+        page: pageInfo,
+        useSummary: true,
       }"
       @check-row="onCheckedRow"
       @check-all="onCheckedRow"
@@ -63,6 +66,30 @@
           v-model="stripeMV"
         />
       </div>
+      <div class="form-rows">
+        <span class="badge yellow">
+          Use Selection
+        </span>
+        <ev-toggle
+          v-model="useSelection.use"
+        />
+        <span class="badge yellow">
+          Multiple Selection
+        </span>
+        <ev-toggle
+          v-model="useSelection.multiple"
+        />
+        <span class="badge yellow">
+          Limit Count
+        </span>
+        <ev-select
+          v-model="useSelection.limitCount"
+          :items="limitItems"
+          :style="{ width: '200px' }"
+          clearable
+          placeholder="Please select value."
+        />
+      </div>
       <div class="form-rows">
         <div class="form-row">
           <span class="badge yellow">
@@ -167,7 +194,6 @@
             v-model="highlightMV"
             :step="1"
             :max="100"
-            :min="0"
           />
         </div>
         <div class="form-row">
@@ -235,7 +261,7 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue';
+import { ref, computed, reactive } from 'vue';
 
 export default {
   setup() {
@@ -259,14 +285,14 @@ export default {
     const menuItems = ref([{
         text: 'Menu1',
         click: () => {
-          console.log(`[Menu1] Selected Row Data: ${JSON.stringify(selected.value.data)}`);
+          console.log(`[Menu1] Selected Row Data: ${JSON.stringify(selected.value[0].data)}`);
         },
       }, {
         text: 'Menu2',
         click: () => console.log('[Menu2]'),
       },
     ]);
-    const highlightMV = ref(0);
+    const highlightMV = ref(-1);
     const borderMV = ref('');
     const iconMV = ref('');
     const dataIconMV = ref('');
@@ -424,11 +450,42 @@ export default {
     const columns = ref([
       { caption: 'ID', field: 'id', type: 'number' },
       { caption: 'Date', field: 'date', type: 'string' },
-      { caption: 'Name', field: 'name', type: 'number' },
+      {
+        caption: 'Name',
+        field: 'name',
+        type: 'float',
+        summaryType: 'sum',
+        summaryRenderer: 'Sum: {0}',
+        decimal: 1,
+      },
+    ]);
+    const limitItems = ref([
+      {
+        name: '2',
+        value: 2,
+      },
+      {
+        name: '4',
+        value: 4,
+      },
     ]);
+    const useSelection = reactive({
+      use: true,
+      multiple: true,
+      limitCount: 2,
+    });
+    const pageInfo = reactive({
+      use: true,
+      // isInfinite: true,
+      perPage: 5,
+      total: computed(() => tableData.value.length),
+      useClient: true,
+      showPageInfo: true,
+    });
 
     getData();
     return {
+      pageInfo,
       columns,
       tableData,
       selected,
@@ -451,6 +508,16 @@ export default {
       highlightMV,
       borderMV,
       borderItems,
+      iconMV,
+      iconItems,
+      expandIconMV,
+      collapseIconMV,
+      dataIconMV,
+      dataIconItems,
+      parentIconMV,
+      childIconMV,
+      limitItems,
+      useSelection,
       onClickCheckbox,
       onClickButton,
       changeMode,
@@ -460,14 +527,6 @@ export default {
       resetBorderStyle,
       resetTreeIcon,
       resetDataIcon,
-      iconMV,
-      iconItems,
-      expandIconMV,
-      collapseIconMV,
-      dataIconMV,
-      dataIconItems,
-      parentIconMV,
-      childIconMV,
       onReset,
     };
   },

docs/views/treeGrid/example/Toolbar.vue

@@ -81,7 +81,7 @@ export default {
     const menuItems = ref([
       {
         text: 'Menu1',
-        click: () => console.log(`[Menu1] Selected Row Data: ${selected.value.data}`),
+        click: () => console.log(`[Menu1] Selected Row Data: ${selected.value[0].data}`),
       }, {
         text: 'Menu2',
         click: () => console.log('[Menu2]'),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.11",
+  "version": "3.3.12",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

src/components/grid/grid.summary.vue

@@ -84,6 +84,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    isTree: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const ROW_DATA_INDEX = 2;
@@ -112,13 +116,18 @@ export default {
           return stores.value.store.length;
         }
         if (column.type === 'number' || column.type === 'float') {
-          const columnValues = stores.value.store.map(rows => rows[ROW_DATA_INDEX][columnIndex]);
+          let columnValues = [];
+          if (props.isTree) {
+            columnValues = stores.value.store.map(node => node.data?.[column.field]);
+          } else {
+            columnValues = stores.value.store.map(row => row[ROW_DATA_INDEX][columnIndex]);
+          }
           switch (summaryType) {
             case 'sum':
               result = columnValues.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!Number.isNaN(value)) {
-                  return prev + curr;
+                  return prev + value;
                 }
                 return prev;
               }, 0);
@@ -127,7 +136,7 @@ export default {
               result = columnValues.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!Number.isNaN(value)) {
-                  return prev + curr;
+                  return prev + value;
                 }
                 return prev;
               }, 0) / columnValues.length;
@@ -180,8 +189,10 @@ export default {
 <style lang="scss" scoped>
 @import 'style/grid.scss';
 .grid-summary {
-  background-color: #F8F9F9;
-  border-bottom: 1px solid #CFCFCF;
+  @include evThemify() {
+    border-bottom: 1px solid evThemed('disabled');
+    background-color: evThemed('background-lighten');
+  }
   .non-border {
     border-bottom: none !important;
   }
@@ -190,7 +201,10 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 14px;
-    color: #737373;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
   .column {
     &.number,

src/components/grid/uses.js

@@ -38,7 +38,7 @@ export const commonFunctions = () => {
    * @returns {number|string} 변환된 데이터
    */
   const getConvertValue = (column, value) => {
-    let convertValue = value;
+    let convertValue = column.type === 'number' || column.type === 'float' ? Number(value) : value;
 
     if (column.type === 'number') {
       convertValue = numberWithComma(value);