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'