找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

130

主题

246

帖子

1530

积分

超级版主

Rank: 8Rank: 8

积分
1530
Winny
超级版主   /  发表于:2021-8-24 14:57  /   查看:1913  /  回复:0
本帖最后由 Winny 于 2021-8-30 09:25 编辑

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

    具体Demo见附件。





index09.html

4 KB, 下载次数: 19

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部