Merge pull request #97 from VisActor/feat/add-progress-proxy-in-trans…

…pose-table

Feat/add progress proxy in transpose table

packages/vtable/examples/auto-size/auto-height.ts

@@ -0,0 +1,107 @@
+import * as VTable from '../../src';
+import { bindDebugTool } from '../../src/scenegraph/debug-tool';
+const ListTable = VTable.ListTable;
+const Table_CONTAINER_DOM_ID = 'vTable';
+
+export function createTable() {
+  const personsDataSource: any[] = [];
+  for (let i = 0; i < 1000; i++) {
+    personsDataSource.push({
+      progress: Math.ceil(20 * Math.random()),
+      id: i + 1,
+      name: 'name'
+    });
+  }
+  const option: VTable.ListTableConstructorOptions = {
+    parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+    columns: [
+      {
+        field: 'progress',
+        fieldFormat(rec) {
+          // return `已完成已完成已完成${rec.progress}%`;
+          let str = '';
+          for (let i = 0; i < rec.progress; i++) {
+            str = str + '已完成';
+          }
+          return str + rec.progress;
+        },
+        caption: 'progress',
+        description: '这是一个标题的详细描述',
+        width: 150,
+        showSort: true, //显示VTable内置排序图标
+        style: {
+          autoWrapText: true
+        },
+        headerStyle: {
+          autoWrapText: true
+        }
+      },
+      {
+        field: 'id',
+        caption: 'ID',
+        sort: (v1, v2, order) => {
+          if (order === 'desc') {
+            return v1 === v2 ? 0 : v1 > v2 ? -1 : 1;
+          }
+          return v1 === v2 ? 0 : v1 > v2 ? 1 : -1;
+        },
+        width: 100
+      },
+      {
+        field: 'id',
+        fieldFormat(rec) {
+          return `手动换行\n这是这是第${rec.id}号`;
+        },
+        caption: 'ID说明',
+        description: '这是一个ID详细描述',
+        sort: (v1, v2, order) => {
+          if (order === 'desc') {
+            return v1 === v2 ? 0 : v1 > v2 ? -1 : 1;
+          }
+          return v1 === v2 ? 0 : v1 > v2 ? 1 : -1;
+        },
+        width: 150
+      },
+      {
+        caption: 'Name',
+        headerStyle: {
+          textAlign: 'center',
+          fontWeight: 'bold',
+          fontSize: 13,
+          fontFamily: 'sans-serif'
+        },
+        field: 'name',
+        width: 150
+      }
+    ],
+    showFrozenIcon: true, //显示VTable内置冻结列图标
+    widthMode: 'standard',
+    allowFrozenColCount: 2,
+    defaultRowHeight: 50,
+    // theme: {},
+    hover: {
+      // isShowTooltip: true, //当hover到未展示全的文本上时是否需要出现提示框
+      // enableRowHighlight: true, //hover到的行，整行高亮
+      // enableColumnHighlight: true, //hover到的行，整行高亮
+      highlightMode: 'cross',
+      // enableSingalCellHighlight: true, //hover到的单元格高亮
+      disableHeaderHover: true
+    },
+    autoRowHeight: true
+  };
+
+  const instance = new ListTable(option);
+
+  //设置表格数据
+  instance.setRecords(personsDataSource, {
+    field: 'progress',
+    order: 'desc'
+  });
+
+  bindDebugTool(instance.scenegraph.stage as any, {
+    customGrapicKeys: ['role', '_updateTag']
+  });
+
+  // 只为了方便控制太调试用，不要拷贝
+  (window as any).tableInstance = instance;
+}

packages/vtable/examples/auto-size/auto-width.ts

@@ -1,4 +1,5 @@
 import * as VTable from '../../src';
+import { bindDebugTool } from '../../src/scenegraph/debug-tool';
 const ListTable = VTable.ListTable;
 const Table_CONTAINER_DOM_ID = 'vTable';
 
@@ -221,7 +222,7 @@ export function createTable() {
 
   const instance = new ListTable(option);
 
-  VTable.bindDebugTool(instance.scenegraph.stage as any, {
+  bindDebugTool(instance.scenegraph.stage as any, {
     customGrapicKeys: ['role', '_updateTag']
   });
 

packages/vtable/examples/list/list-transpose.ts

@@ -0,0 +1,82 @@
+import * as VTable from '../../src';
+const Table_CONTAINER_DOM_ID = 'vTable';
+const generatePersons = count => {
+  return Array.from(new Array(count)).map((_, i) => ({
+    id: i + 1,
+    email1: `${i + 1}@xxx.com`,
+    name: `小明${i + 1}`,
+    lastName: '王',
+    date1: '2022年9月1日',
+    tel: '000-0000-0000',
+    sex: i % 2 === 0 ? 'boy' : 'girl',
+    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
+    city: 'beijing'
+  }));
+};
+
+export function createTable() {
+  const records = generatePersons(1000000);
+  const columns: VTable.ColumnsDefine = [
+    {
+      field: 'id',
+      caption: 'ID',
+      width: 120,
+      sort: true
+    },
+    {
+      field: 'email1',
+      caption: 'email',
+      width: 200,
+      sort: true
+    },
+    {
+      caption: 'full name',
+      columns: [
+        {
+          field: 'name',
+          caption: 'First Name',
+          width: 200
+        },
+        {
+          field: 'name',
+          caption: 'Last Name',
+          width: 200
+        }
+      ]
+    },
+    {
+      field: 'date1',
+      caption: 'birthday',
+      width: 200
+    },
+    {
+      field: 'sex',
+      caption: 'sex',
+      width: 100
+    },
+    {
+      field: 'tel',
+      caption: 'telephone',
+      width: 150
+    },
+    {
+      field: 'work',
+      caption: 'job',
+      width: 200
+    },
+    {
+      field: 'city',
+      caption: 'city',
+      width: 150
+    }
+  ];
+  const option = {
+    parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+    records,
+    columns,
+    transpose: true,
+    defaultColWidth: 200
+  };
+  const tableInstance = new VTable.ListTable(option);
+  (window as any).tableInstance = tableInstance;
+}

packages/vtable/examples/list/list.ts

@@ -76,5 +76,5 @@ export function createTable() {
     columns
   };
   const tableInstance = new VTable.ListTable(option);
-  window.tableInstance = tableInstance;
+  (window as any).tableInstance = tableInstance;
 }

packages/vtable/examples/menu.ts

@@ -6,6 +6,10 @@ export const menus = [
         path: 'list',
         name: 'list'
       },
+      {
+        path: 'list',
+        name: 'list-transpose'
+      },
       {
         path: 'list',
         name: 'list-tree'
@@ -215,6 +219,10 @@ export const menus = [
       {
         path: 'auto-size',
         name: 'auto-width'
+      },
+      {
+        path: 'auto-size',
+        name: 'auto-height'
       }
     ]
   },

packages/vtable/src/core/BaseTable.ts

@@ -1018,17 +1018,21 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   }
   /**
    * 清空含有指定row的缓存
-   * @param col
+   * @param row
    */
-  _clearRowRangeHeightsMap(row: number): void {
-    const keys = this._rowRangeHeightsMap.keys();
-    for (const key of keys) {
-      const reg = rangeReg.exec(key);
-      if (reg) {
-        const start = Number(reg[1]);
-        const end = Number(reg[2]);
-        if (row >= start && row <= end) {
-          this._rowRangeHeightsMap.delete(key);
+  _clearRowRangeHeightsMap(row?: number): void {
+    if (typeof row !== 'number') {
+      this._rowRangeHeightsMap.clear();
+    } else {
+      const keys = this._rowRangeHeightsMap.keys();
+      for (const key of keys) {
+        const reg = rangeReg.exec(key);
+        if (reg) {
+          const start = Number(reg[1]);
+          const end = Number(reg[2]);
+          if (row >= start && row <= end) {
+            this._rowRangeHeightsMap.delete(key);
+          }
         }
       }
     }

packages/vtable/src/event/event.ts

@@ -11,7 +11,7 @@ import { bindMediaClick } from './media-click';
 import { bindDrillEvent, drillClick } from './drill';
 import { bindSparklineHoverEvent } from './sparkline-event';
 import type { BaseTableAPI } from '../ts-types/base-table';
-import { handleTextStick } from '../scenegraph/stick-text';
+import { checkHaveTextStick, handleTextStick } from '../scenegraph/stick-text';
 import { bindTableGroupListener } from './listener/table-group';
 import { bindScrollBarListener } from './listener/scroll-bar';
 import { bindContainerDomListener } from './listener/container-dom';
@@ -74,9 +74,11 @@ export class EventManeger {
     });
 
     // 处理textStick
-    this.table.listen(TABLE_EVENT_TYPE.SCROLL, e => {
-      handleTextStick(this.table);
-    });
+    if (checkHaveTextStick(this.table)) {
+      this.table.listen(TABLE_EVENT_TYPE.SCROLL, e => {
+        handleTextStick(this.table);
+      });
+    }
 
     // link/image/video点击
     bindMediaClick(this.table);