这里分享一个用活字格实现的借贷凭证录入表格的实现方案,供格友们参考,主要效果如下:
实现思路:
1、表格主体设计是通过组件和图文列表实现。
2、数据行新增、删除、复制的操作通过图文列表外的命名的辅助按钮和图文列表里内置 JS API 进行触发:
这里这样做的原因在于,数据新增、删除、复制需要使用表格操作命令,只有在图文列表外面才可以选择到相关表格,所以命令通过辅助按钮写在外面,内部用按钮名称和内置 API 触发。
3、这里有一个交互的难点在于,点击金额位置,需要切换为输入表单进行录入,录入完毕后,把金额每位数字拆出来,放到对应位置并展示。这里实现思路如下:
3.1 初始情况下,给金额位置放置一个透明的背景图片,点击背景图片利用设置单元格位置命令把表单单元格移动到录入位置:
3.2 然后数据录入好后,需要在焦点时离把录入表单单元格移走,所以这里对录入表单的单元格绑定的焦点离开事件,在焦点离开是,通过 JS 触发逻辑,把表单单元格移走:
3.3 然后金额的拆分展示,用了 Excel 公式:
其他的一些实现,这里不详细展开了,demo 见附件(版本 10.0.5.0),可能会有些细节可能不满足实际情况,欢迎格友们论坛发帖交流。
记账凭证.fgcc
(1.32 MB, 下载次数: 60)
|