SpreadJS实现模态表单信息查询
本帖最后由 Winny 于 2021-8-30 09:25 编辑最近有不少用户，希望将SpreadJS与传统的模态表单结合使用。实现点击SpreadJS单元格时，弹出其它与之关联的信息。
其实在正常项目中，弹出一个模态框是一个十分常见的需求，但当与SpreadJS集成时，很多用户就无从下手了。但其实在SpreadJS中点击后跳出弹出框显示其他信息，与正常项目中点击按钮跳出模态框并无任何差异。
本文提供一个简单的Demo，希望显示的效果截图如下：
当用户点击A列时，与当前用户相关联的其他信息会弹出到当前窗口，弹出窗中可以对当前用户的其它信息进行修改或查看。
该功能实现的具体步骤如下：
step1: 样式布局；
最开始时，弹出框默认不显示，这里布局样式不做过多讲解，有一点前端基础的人，相信都可以写好类似的布局。如果还是不会可以查看附件Demo。
step2: 加载表格中的数据； 设置关联数据，具体项目中该部分可由数据库查询而来。
设置数据这里我用的是setArray()，关于设置数据的方法其实很多，有setValue(),setDataSource()等等，大家根据项目需求灵活的使用即可。除了需要设置表格中的数据，还需要一个对象用来维护与表格中数据一一对应的其他信息，由于是测试Demo，我这里直接以第一列内容为映射字段，核心代码如下所示:
step3: 添加点击事件绑定；
step4: 修改数据/关闭弹窗
在弹出的div中，可以修改每个字段中的内容，修改完成之后点击修改将内容回写到info中，若只是查看，并不修改直接点击关闭即可。
在点击修改或关闭按钮之后需要将其它信息的div进行隐藏~
具体Demo见附件。
页:
[1]