美文网首页
表格复制粘贴功能实现及配置系统优化建议

表格复制粘贴功能实现及配置系统优化建议

作者: 檀越_bbf2 | 来源:发表于2021-07-07 09:28 被阅读0次

    背景

             项目大多页面都是配置实现的,配置分为几大块,表格,表单,按钮,而我们的页面很多是可以复用的,配置工作繁杂,需要多个页面切换复制粘贴,而极易出错,在这样的情况下,我就想有一个更方便的配置解决办法,

    想要可以直接把表格列,或表单项复制粘贴到另外一个表格或表单里。

    想法

            开始思考如何实现这一个功能;表格的展示其实是数据,复制数据,然后把数据再放到表格这个流程就算完成了。关键点是,1、获取到复制的内容,复制容易,要获取粘贴的内容就不容易了。2、获取到当前鼠标所在行的位置。

    浏览器禁止js 执行 document.execCommand('parse') 命令,就无法获取到粘贴的内容;通过多方查阅资料,突然想到一个解决方案,解决了这个问题。

    期望是这样的:

    实现

    通过 onmousedown 事件 与 onparste 事件执行先后顺序不同,先执行onmousedown 事件 之后 再执行 onpasrte事件,通过修改目标元素的  ”contenteditable“ 来弹出粘贴按钮,执行默认的 用户操作粘贴事件。

    价值

              有这个功能之后,我们配置表单,表格,遇到相同的字段,或是草稿阶段的配置,或是相似页面的配置,将会大大节省开发时间,以前可能需要 30分钟,2个小时完成的工作,现在只需要几秒钟。

    相关文章

      网友评论

          本文标题:表格复制粘贴功能实现及配置系统优化建议

          本文链接:https://www.haomeiwen.com/subject/zxhoultx.html