Merge pull request #694 from VisActor/release/0.16.0

[Auto release] release 0.16.0

common/config/rush/version-policies.json

@@ -1 +1,9 @@
-[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.15.5","mainProject":"@visactor/vtable","nextBump":"patch"}]
+[
+  {
+    "definitionName": "lockStepVersion",
+    "policyName": "vtableMain",
+    "version": "0.16.0",
+    "mainProject": "@visactor/vtable",
+    "nextBump": "minor"
+  }
+]

docs/assets/api/en/methods.md

@@ -647,4 +647,62 @@ End editing
 Get all data of the current table
 
 ## dataSouce(CachedDataSource)
-Set the data source for the VTable table component instance. For specific usage, please refer to [Asynchronous data lazy loading demo](../demo/performance/async-data) and [Tutorial](../guide/data/async_data)
+Set the data source for the VTable table component instance. For specific usage, please refer to [Asynchronous data lazy loading demo](../demo/performance/async-data) and [Tutorial](../guide/data/async_data)
+
+## addRecords(Function)
+
+ Add data, support multiple pieces of data
+
+**  Note: ListTable specific interface ** 
+
+```
+  /**
+   * Add data to support multiple pieces of data
+   * @param records multiple data
+   * @param recordIndex The position to be inserted into the data source, starting from 0. If recordIndex is not set, it will be appended to the end by default.
+   * If the sorting rule recordIndex is set to be invalid, the sorting logic will be automatically adapted to determine the insertion order.
+   * recordIndex can be obtained through the interface getRecordShowIndexByCell
+   */
+  addRecords(records: any[], recordIndex?: number)
+```
+
+## addRecord(Function)
+
+ Add data, single piece of data
+
+**  Note: ListTable specific interface ** 
+
+```
+  /**
+   * Add data single data
+   * @param record data
+   * @param recordIndex The position to be inserted into the data source, starting from 0. If recordIndex is not set, it will be appended to the end by default.
+   * If the sorting rule recordIndex is set to be invalid, the sorting logic will be automatically adapted to determine the insertion order.
+   * recordIndex can be obtained through the interface getRecordShowIndexByCell
+   */
+  addRecord(record: any, recordIndex?: number)
+```
+
+## deleteRecords(Function)
+
+Delete data supports multiple pieces of data
+
+**  Note: ListTable specific interface ** 
+
+```
+  /**
+   * Delete data supports multiple pieces of data
+   * @param recordIndexs The index of the data to be deleted (the entry index displayed in the body)
+   */
+  deleteRecords(recordIndexs: number[])
+```
+
+## getRecordShowIndexByCell(Function)
+
+Get the index of the current cell data in the body part, that is, remove the index of the header level number by the row and column number.
+
+** ListTable proprietary **
+```
+  /** Get the display index of the current cell in the body part (row/col-headerLevelCount). Note: ListTable specific interface */
+  getRecordShowIndexByCell(col: number, row: number): number
+```

docs/assets/api/zh/methods.md

@@ -651,4 +651,59 @@ use case: 点击图例项后 更新过滤规则 来更新图表
 获取当前表格的全部数据
 
 ## dataSouce(CachedDataSource)
-给VTable表格组件实例设置数据源，具体使用可以参考[异步懒加载数据demo](../demo/performance/async-data)及[教程](../guide/data/async_data)
+给VTable表格组件实例设置数据源，具体使用可以参考[异步懒加载数据demo](../demo/performance/async-data)及[教程](../guide/data/async_data)
+
+## addRecords(Function)
+
+ 添加数据，支持多条数据
+
+** ListTable 专有 ** 
+```
+  /**
+   * 添加数据 支持多条数据
+   * @param records 多条数据
+   * @param recordIndex 向数据源中要插入的位置，从0开始。不设置recordIndex的话 默认追加到最后。
+   * 如果设置了排序规则recordIndex无效，会自动适应排序逻辑确定插入顺序。
+   * recordIndex 可以通过接口getRecordShowIndexByCell获取
+   */
+  addRecords(records: any[], recordIndex?: number) 
+```
+
+## addRecord(Function)
+
+ 添加数据，单条数据
+
+** ListTable 专有 ** 
+```
+  /**
+   * 添加数据 单条数据
+   * @param record 数据
+   * @param recordIndex 向数据源中要插入的位置，从0开始。不设置recordIndex的话 默认追加到最后。
+   * 如果设置了排序规则recordIndex无效，会自动适应排序逻辑确定插入顺序。
+   * recordIndex 可以通过接口getRecordShowIndexByCell获取
+   */
+  addRecord(record: any, recordIndex?: number)
+```
+
+## deleteRecords(Function)
+
+删除数据 支持多条数据
+
+** ListTable 专有 ** 
+```
+  /**
+   * 删除数据 支持多条数据
+   * @param recordIndexs 要删除数据的索引（显示到body中的条目索引）
+   */
+  deleteRecords(recordIndexs: number[]) 
+```
+
+## getRecordShowIndexByCell(Function)
+
+获取当前单元格数据在body部分的索引，即通过行列号去除表头层级数的索引
+
+** ListTable 专有 ** 
+```
+  /** 获取当前单元格在body部分的展示索引（row / col-headerLevelCount）。注：ListTable特有接口 */
+  getRecordShowIndexByCell(col: number, row: number): number
+```

docs/assets/demo/en/edit/add-delete-records.md

@@ -0,0 +1,183 @@
+---
+category: examples
+group: edit
+title: add or delete records
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/performance.gif
+---
+
+# Add and delete data dynamically
+
+Add and delete data dynamically，Right-click and the Modify Data menu is displayed
+
+## Key Configurations
+
+- addRecords api
+- addRecord api
+- deleteRecords api
+- changeCellValue api
+
+## Code demo
+
+```javascript livedemo template=vtable
+const input_editor = new VTable_editors.InputEditor();
+VTable.register.editor('input-editor', input_editor);
+function generateRandomString(length) {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+}
+function generateRandomHobbies() {
+  const hobbies = [
+    'Reading books',
+    'Playing video games',
+    'Watching movies',
+    'Cooking',
+    'Hiking',
+    'Traveling',
+    'Photography',
+    'Playing musical instruments',
+    'Gardening',
+    'Painting',
+    'Writing',
+    'Swimming'
+  ];
+
+  const numHobbies = Math.floor(Math.random() * 3) + 1; // 生成 1-3 之间的随机整数
+  const selectedHobbies = [];
+
+  for (let i = 0; i < numHobbies; i++) {
+    const randomIndex = Math.floor(Math.random() * hobbies.length);
+    const hobby = hobbies[randomIndex];
+    selectedHobbies.push(hobby);
+    hobbies.splice(randomIndex, 1); // 确保每个爱好只选一次
+  }
+
+  return selectedHobbies.join(', ');
+}
+function generateRandomBirthday() {
+  const start = new Date('1970-01-01');
+  const end = new Date('2000-12-31');
+  const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+  const year = randomDate.getFullYear();
+  const month = randomDate.getMonth() + 1;
+  const day = randomDate.getDate();
+  return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
+}
+
+function generateRandomPhoneNumber() {
+  const areaCode = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '170', '176', '177', '178', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189'];
+  const prefix = areaCode[Math.floor(Math.random() * areaCode.length)];
+  const suffix = String(Math.random()).substr(2, 8);
+  return prefix + suffix;
+}
+
+const generatePersons = (count) => {
+  return Array.from(new Array(count)).map((_, i) => {
+    const first=generateRandomString(10);
+    const last=generateRandomString(4);
+    return {
+    id: i+1,
+    email1: `${first}_${last}@xxx.com`,
+    name: first,
+    lastName: last,
+    hobbies: generateRandomHobbies(),
+    birthday: generateRandomBirthday(),
+    tel: generateRandomPhoneNumber(),
+    sex: i % 2 === 0 ? 'boy' : 'girl',
+    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
+    city: 'beijing',
+  }});
+};
+
+
+const records = generatePersons(1000);
+const columns = [
+  {
+    field: 'id',
+    title: 'ID',
+    width: 80,
+    sort: true,
+  },
+  {
+    field: 'email1',
+    title: 'email',
+    width: 250,
+    sort: true,
+  },
+  {
+    field: 'full name',
+    title: 'Full name',
+    columns: [
+      {
+        field: 'name',
+        title: 'First Name',
+        width: 120,
+      },
+      {
+        field: 'lastName',
+        title: 'Last Name',
+        width: 100,
+      },
+    ],
+  },
+  {
+    field: 'hobbies',
+    title: 'hobbies',
+    width: 200,
+  },
+  {
+    field: 'birthday',
+    title: 'birthday',
+    width: 120,
+  },
+  {
+    field: 'sex',
+    title: 'sex',
+    width: 100,
+  },
+  {
+    field: 'tel',
+    title: 'telephone',
+    width: 150,
+  },
+  {
+    field: 'work',
+    title: 'job',
+    width: 200,
+  },
+  {
+    field: 'city',
+    title: 'city',
+    width: 150,
+  },
+];
+const option = {
+  records,
+  columns,
+  menu:{
+    contextMenuItems:["insert records bellow","insert blank row bellow",'modify cell value','delete records']
+  },
+  editor: 'input-editor'
+};
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+
+tableInstance.on('dropdown_menu_click', (args) => {
+  console.log('dropdown_menu_click',args);
+  if(args.menuKey==="insert records bellow"){
+    const recordIndex=tableInstance.getRecordShowIndexByCell(args.col,args.row);
+    tableInstance.addRecords(generatePersons(1),recordIndex+1);
+  }else if(args.menuKey==="insert blank row bellow"){
+    const recordIndex=tableInstance.getRecordShowIndexByCell(args.col,args.row);
+    tableInstance.addRecord({},recordIndex+1);
+  }else if(args.menuKey==="delete records"){
+    const recordIndex=tableInstance.getRecordShowIndexByCell(args.col,args.row);
+    tableInstance.deleteRecords([recordIndex]);
+  }else if(args.menuKey==="modify cell value"){
+    tableInstance.startEditCell(args.col,args.row);
+  }
+})
+```

docs/assets/demo/en/edit/pivot-table-editor.md

@@ -1,6 +1,6 @@
 ---
 category: examples
-group: table-type
+group: edit
 title: pivot table edit data
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/pivot-table-editor.gif
 link: '../guide/edit/edit_cell'