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

背景

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

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

想法

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

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

期望是这样的:


实现

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

价值

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,543评论 1 41
  • * iOS人机界面准则 iOS设计原则、Mac版本的iPad应用、UI控件 * 应用架构 程序启动、启动屏、模态、...
    王滋溜阅读 927评论 0 1
  • JavaScript 浏览器的内核 谷歌浏览器 Webkit内核(v8引擎)Blink火狐浏览器 Gecko内核欧...
    壞忎阅读 332评论 0 0
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,901评论 28 54
  • 信任包括信任自己和信任他人 很多时候,很多事情,失败、遗憾、错过,源于不自信,不信任他人 觉得自己做不成,别人做不...
    吴氵晃阅读 6,396评论 4 8

友情链接更多精彩内容