[#1176] Grid > 컬럼 sort 시 값이 null 일 때 처리 (#1178)

Co-authored-by: yell <yell@ex-em.com>
ex-em · May 24, 2022 · 38172c4 · 38172c4
1 parent 38ea02b
commit 38172c4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/docs/views/grid/example/Summary.vue b/docs/views/grid/example/Summary.vue
@@ -72,6 +72,11 @@ export default {
         type: 'string',
         summaryRenderer: 'Total', // text 만
       },
+      { caption: 'RTS Port',
+        field: 'rts_port',
+        type: 'stringNumber',
+        width: 80,
+      },
       { caption: 'Total (MB)',
         field: 'total_mb',
         type: 'number',
@@ -93,20 +98,20 @@ export default {
       { caption: 'Diff', field: 'diff', type: 'float', decimal: 1, hide: true },
     ]);
     tableData.value = [
-      ['HIDB_DATA_1', 30000, 27506, 7185, 2000.7],
-      ['HIDB_DATA_2', 29000, 23659, 0, 1500],
-      ['HIDB_LARGE_1', 28000, 21695, 1185, -4.7],
-      ['HIDB_INDEX_1', 27000, 23685, 0, 0],
-      ['HIDB_INDEX_2', 26000, 23535, 0, 0],
-      ['HIDB_INDEX_3', 25000, 23659, 0, 0],
-      ['HIDB_L_INDEX_1', 24000, 23695, 0, 0],
-      ['HIDB_L_INDEX_2', 23000, 21691, 0, 0],
-      ['HIDB_L_INDEX_3', 22000, 20021, 0, 0],
-      ['HIDB_DATA_3', 21000, 14485, 0, 0],
-      ['HIDB_DATA_4', 20000, 14396, 2185, -11],
-      ['SYSAUX', 11000, 9485, 0, -11],
-      ['USERS', 10000, 6485, 0, 0],
-      ['UNDOTBS1', 9000, 3486, 0, 0],
+      ['HIDB_DATA_1', '', undefined, 27506, 7185, 2000.7],
+      [null, '', 0, 23659, 0, 1500],
+      ['HIDB_LARGE_1', '25080', 28000, 21695, 1185, -4.7],
+      [null, '4004', 27000, 23685, 0, 0],
+      ['HIDB_INDEX_2', '4004', 26000, 23535, 0, 0],
+      ['', '4004', null, 23659, 0, 0],
+      ['HIDB_L_INDEX_1', '0', 24000, 23695, 0, 0],
+      ['HIDB_L_INDEX_2', '25080', 0, 21691, 0, 0],
+      ['HIDB_L_INDEX_3', '25080', -2000, 20021, 0, 0],
+      ['HIDB_DATA_3', '25080', -10, 14485, 0, 0],
+      ['HIDB_DATA_4', '', 20000, 14396, 2185, -11],
+      ['SYSAUX', '', 11000, 9485, 0, -11],
+      ['USERS', '4004', 10000, 6485, 0, 0],
+      ['UNDOTBS1', '4004', 9000, 3486, 0, 0],
     ];
     const pageInfo = reactive({
       use: false,

diff --git a/src/components/grid/uses.js b/src/components/grid/uses.js
@@ -530,6 +530,8 @@ export const sortEvent = (params) => {
   const setSort = () => {
     const setDesc = (a, b) => (a > b ? -1 : 1);
     const setAsc = (a, b) => (a < b ? -1 : 1);
+    const numberSetDesc = (a, b) => ((a === null) - (b === null) || Number(b) - Number(a));
+    const numberSetAsc = (a, b) => ((a === null) - (b === null) || Number(a) - Number(b));
     if (sortInfo.sortOrder === 'init' || (!sortInfo.sortField && !sortInfo.isSorting)) {
       stores.store.sort((a, b) => {
         if (typeof a[ROW_INDEX] === 'number') {
@@ -542,10 +544,13 @@ export const sortEvent = (params) => {
     const index = getColumnIndex(sortInfo.sortField);
     const type = props.columns[index]?.type || 'string';
     const sortFn = sortInfo.sortOrder === 'desc' ? setDesc : setAsc;
+    const numberSortFn = sortInfo.sortOrder === 'desc' ? numberSetDesc : numberSetAsc;
     switch (type) {
       case 'string':
         stores.store.sort((a, b) => {
-          if (typeof a[ROW_DATA_INDEX][index] === 'string') {
+          if (!a[ROW_DATA_INDEX][index] || typeof a[ROW_DATA_INDEX][index] === 'string') {
+            a[ROW_DATA_INDEX][index] = a[ROW_DATA_INDEX][index] || '';
+            b[ROW_DATA_INDEX][index] = b[ROW_DATA_INDEX][index] || '';
             return sortFn(a[ROW_DATA_INDEX][index]?.toLowerCase(),
               b[ROW_DATA_INDEX][index]?.toLowerCase());
           }
@@ -554,16 +559,18 @@ export const sortEvent = (params) => {
         break;
       case 'stringNumber':
         stores.store.sort((a, b) => {
-          if (typeof a[ROW_DATA_INDEX][index] === 'string' || typeof a[ROW_DATA_INDEX][index] === 'number') {
-            return sortFn(Number(a[ROW_DATA_INDEX][index]), Number(b[ROW_DATA_INDEX][index]));
+          if (!a[ROW_DATA_INDEX][index] || typeof a[ROW_DATA_INDEX][index] === 'string' || typeof a[ROW_DATA_INDEX][index] === 'number') {
+            a[ROW_DATA_INDEX][index] = a[ROW_DATA_INDEX][index] === '' ? null : a[ROW_DATA_INDEX][index];
+            b[ROW_DATA_INDEX][index] = b[ROW_DATA_INDEX][index] === '' ? null : b[ROW_DATA_INDEX][index];
+            return numberSortFn(a[ROW_DATA_INDEX][index] ?? null, b[ROW_DATA_INDEX][index] ?? null);
           }
           return 0;
         });
         break;
       default:
         stores.store.sort((a, b) => {
-          if (typeof a[ROW_DATA_INDEX][index] === 'number' || typeof a[ROW_DATA_INDEX][index] === 'boolean') {
-            return sortFn(a[ROW_DATA_INDEX][index], b[ROW_DATA_INDEX][index]);
+          if (!a[ROW_DATA_INDEX][index] || typeof a[ROW_DATA_INDEX][index] === 'number' || typeof a[ROW_DATA_INDEX][index] === 'boolean') {
+            return numberSortFn(a[ROW_DATA_INDEX][index] ?? null, b[ROW_DATA_INDEX][index] ?? null);
           }
           return 0;
         });