From 936b31ddb2c4db92c250acaa7daaad2b48524f47 Mon Sep 17 00:00:00 2001 From: Dingjianzhong Date: Wed, 15 Oct 2025 16:02:02 +0800 Subject: [PATCH] Update 53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 错别字 --- ...ing editable cells in VTable components.md | 369 +++++++++--------- 1 file changed, 185 insertions(+), 184 deletions(-) diff --git a/docs/assets/faq/zh/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md b/docs/assets/faq/zh/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md index 652eefa07f..821b8e4532 100644 --- a/docs/assets/faq/zh/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md +++ b/docs/assets/faq/zh/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md @@ -1,6 +1,6 @@ ---- -title: 31. VTable表格组件实现单元格可编辑后，怎么控制退出编辑的时机？
-key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM +--- +title: 31. VTable表格组件实现单元格可编辑后，怎么控制退出编辑的时机？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM --- ## 问题标题 @@ -19,189 +19,189 @@ VTable表格组件实现单元格可编辑后，怎么控制退出编辑的时 ### 键入enter不退出编辑 -这个可以监听编辑dom的keydown事件，直接组织冒泡，不让VTable监听到也就不会退出编辑了
+这个可以监听编辑dom的keydown事件，直接阻止冒泡，不让VTable监听到也就不会退出编辑了
## 示例代码 -``` -let tableInstance; - class MyInputEditor { - createElement() { - const input = document.createElement('input'); - input.setAttribute('type', 'text'); - input.style.position = 'absolute'; - input.style.padding = '4px'; - input.style.width = '100%'; - input.style.boxSizing = 'border-box'; - this.element = input; - this.container.appendChild(input); - // 监听键盘事件 - input.addEventListener('keydown', (e) => { - // 阻止冒泡 - e.stopPropagation(); - }); - } - setValue(value) { - this.element.value = typeof value !== 'undefined' ? value : ''; - } - getValue() { - return this.element.value; - } - onStart({ value, referencePosition, container, endEdit }){ - this.container = container; - this.successCallback = endEdit; - if (!this.element) { - this.createElement(); - - if (value !== undefined && value !== null) { - this.setValue(value); - } - if (referencePosition?.rect) { - this.adjustPosition(referencePosition.rect); - } - } - this.element.focus(); - } - - adjustPosition(rect) { - this.element.style.top = rect.top + 'px'; - this.element.style.left = rect.left + 'px'; - this.element.style.width = rect.width + 'px'; - this.element.style.height = rect.height + 'px'; - } - onEnd() { - this.container.removeChild(this.element); - this.element = undefined; - } - - isEditorElement(target) { - // 仅允许点击到表格外部才会结束编辑 - if(target.tagName === 'CANVAS') - return true; - return target === this.element; - } -} - -const my_editor = new MyInputEditor(); -VTable.register.editor('my_editor', my_editor); - -const option = { - container: document.getElementById(CONTAINER_ID), - columns: [ - { - field: 'bloggerName', - title: 'bloggerName' - }, - { - field: 'fansCount', - title: 'fansCount', - fieldFormat(rec) { - return rec.fansCount + 'w'; - }, - style: { - fontFamily: 'Arial', - fontSize: 12, - fontWeight: 'bold' - } - }, - { - field: 'worksCount', - title: 'worksCount', - style: { - fontFamily: 'Arial', - fontSize: 12, - fontWeight: 'bold' - } - }, - { - field: 'viewCount', - title: 'viewCount', - fieldFormat(rec) { - return rec.fansCount + 'w'; - }, - style: { - fontFamily: 'Arial', - fontSize: 12, - fontWeight: 'bold' - } - }, - { - field: 'viewCount', - title: 'viewCount', - fieldFormat(rec) { - return rec.fansCount + 'w'; - }, - style: { - fontFamily: 'Arial', - fontSize: 12, - fontWeight: 'bold' - } - }, - ], - records: [ - { - bloggerId: 1, - bloggerName: 'Virtual Anchor Xiaohua', - fansCount: 400, - worksCount: 10, - viewCount: 5, - city: 'Dream City', - tags: ['game', 'anime', 'food'] - }, - { - bloggerId: 2, - bloggerName: 'Virtual anchor little wolf', - fansCount: 800, - worksCount: 20, - viewCount: 15, - city: 'City of Music', - tags: ['music', 'travel', 'photography'] - }, - { - bloggerId: 3, - bloggerName: 'Virtual anchor bunny', - fansCount: 600, - worksCount: 15, - viewCount: 10, - city: 'City of Art', - tags: ['painting', 'handmade', 'beauty makeup'] - }, - { - bloggerId: 4, - bloggerName: 'Virtual anchor kitten', - fansCount: 1000, - worksCount: 30, - viewCount: 20, - city: 'Health City', - tags: ['dance', 'fitness', 'cooking'] - }, - { - bloggerId: 5, - bloggerName: 'Virtual anchor Bear', - fansCount: 1200, - worksCount: 25, - viewCount: 18, - city: 'City of Wisdom', - tags: ['Movie', 'Literature'] - }, - { - bloggerId: 6, - bloggerName: 'Virtual anchor bird', - fansCount: 900, - worksCount: 12, - viewCount: 8, - city: 'Happy City', - tags: ['music', 'performance', 'variety'] - } - ], - enableLineBreak: true, - - editCellTrigger: 'click', - editor:'my_editor' -}; -tableInstance = new VTable.ListTable(option); -tableInstance.on('change_cell_value', arg => { - console.log(arg); -});
+``` +let tableInstance; + class MyInputEditor { + createElement() { + const input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.position = 'absolute'; + input.style.padding = '4px'; + input.style.width = '100%'; + input.style.boxSizing = 'border-box'; + this.element = input; + this.container.appendChild(input); + // 监听键盘事件 + input.addEventListener('keydown', (e) => { + // 阻止冒泡 + e.stopPropagation(); + }); + } + setValue(value) { + this.element.value = typeof value !== 'undefined' ? value : ''; + } + getValue() { + return this.element.value; + } + onStart({ value, referencePosition, container, endEdit }){ + this.container = container; + this.successCallback = endEdit; + if (!this.element) { + this.createElement(); + + if (value !== undefined && value !== null) { + this.setValue(value); + } + if (referencePosition?.rect) { + this.adjustPosition(referencePosition.rect); + } + } + this.element.focus(); + } + + adjustPosition(rect) { + this.element.style.top = rect.top + 'px'; + this.element.style.left = rect.left + 'px'; + this.element.style.width = rect.width + 'px'; + this.element.style.height = rect.height + 'px'; + } + onEnd() { + this.container.removeChild(this.element); + this.element = undefined; + } + + isEditorElement(target) { + // 仅允许点击到表格外部才会结束编辑 + if(target.tagName === 'CANVAS') + return true; + return target === this.element; + } +} + +const my_editor = new MyInputEditor(); +VTable.register.editor('my_editor', my_editor); + +const option = { + container: document.getElementById(CONTAINER_ID), + columns: [ + { + field: 'bloggerName', + title: 'bloggerName' + }, + { + field: 'fansCount', + title: 'fansCount', + fieldFormat(rec) { + return rec.fansCount + 'w'; + }, + style: { + fontFamily: 'Arial', + fontSize: 12, + fontWeight: 'bold' + } + }, + { + field: 'worksCount', + title: 'worksCount', + style: { + fontFamily: 'Arial', + fontSize: 12, + fontWeight: 'bold' + } + }, + { + field: 'viewCount', + title: 'viewCount', + fieldFormat(rec) { + return rec.fansCount + 'w'; + }, + style: { + fontFamily: 'Arial', + fontSize: 12, + fontWeight: 'bold' + } + }, + { + field: 'viewCount', + title: 'viewCount', + fieldFormat(rec) { + return rec.fansCount + 'w'; + }, + style: { + fontFamily: 'Arial', + fontSize: 12, + fontWeight: 'bold' + } + }, + ], + records: [ + { + bloggerId: 1, + bloggerName: 'Virtual Anchor Xiaohua', + fansCount: 400, + worksCount: 10, + viewCount: 5, + city: 'Dream City', + tags: ['game', 'anime', 'food'] + }, + { + bloggerId: 2, + bloggerName: 'Virtual anchor little wolf', + fansCount: 800, + worksCount: 20, + viewCount: 15, + city: 'City of Music', + tags: ['music', 'travel', 'photography'] + }, + { + bloggerId: 3, + bloggerName: 'Virtual anchor bunny', + fansCount: 600, + worksCount: 15, + viewCount: 10, + city: 'City of Art', + tags: ['painting', 'handmade', 'beauty makeup'] + }, + { + bloggerId: 4, + bloggerName: 'Virtual anchor kitten', + fansCount: 1000, + worksCount: 30, + viewCount: 20, + city: 'Health City', + tags: ['dance', 'fitness', 'cooking'] + }, + { + bloggerId: 5, + bloggerName: 'Virtual anchor Bear', + fansCount: 1200, + worksCount: 25, + viewCount: 18, + city: 'City of Wisdom', + tags: ['Movie', 'Literature'] + }, + { + bloggerId: 6, + bloggerName: 'Virtual anchor bird', + fansCount: 900, + worksCount: 12, + viewCount: 8, + city: 'Happy City', + tags: ['music', 'performance', 'variety'] + } + ], + enableLineBreak: true, + + editCellTrigger: 'click', + editor:'my_editor' +}; +tableInstance = new VTable.ListTable(option); +tableInstance.on('change_cell_value', arg => { + console.log(arg); +});
``` @@ -216,3 +216,4 @@ github：https://github.com/VisActor/VTable
+