找回密码
 立即注册

QQ登录

只需一步,快速开始

LukeLiu
超级版主   /  发表于:2019-11-27 13:36  /   查看:8035  /  回复:4
本帖最后由 LukeLiu 于 2019-12-24 13:55 编辑

很多实际的场景需要实现这样的一个效果:在弹窗里,有一个有选择列的表格,选择了几项,关闭弹窗后,选择的项目可以回传到上层页面。

效果类似这样:

弹窗多选.gif


本教程贴,我们一起实现如动图所示的购物车的场景。

1. 首先,我们先预定义一张商品表:

商品表.png

2. 我们再定义一张购物车表,用来记录选择的商品。

购物车.png
3. 之后,我们做一个购物车页面,基本功能就是展示购物车表中的数据:
购物车标注.png
我在这个页面上放了一个添加按钮,想实现的效果是通过点击按钮弹出一个弹窗,然后在弹窗里进行商品选择。

4. 因此,我们还需要新建一个可以选择商品的弹窗页面:
商品选择页面.png
我想要实现的效果是点击确认后,可以把我在这个页面中选择的数据项目,回传到上个页面的表格中。
这需要使用:表格传递命令(加链接),上图标注的方式是使用了方法1,方法2如动图所示:
表格传递--单元格选择模式.gif


6. 回到购物车页面,我们只通过了弹窗回传过来了商品ID,对应的商品名称,商品的型号,商品的单价,我们可以使用Odata的方式从数据库中查询得到。


总结

使用表格数据传递命令,不仅可以传递表格的数据到同页面的其他表格中,还可以传递到其他页面的表格中,再搭配使用OData,可以很好的解决:在弹窗选择多项之后回传的场景的需求。


在弹窗里多选表格项,关闭弹窗选择项回传到上层页面表格.fgcc

149.58 KB, 下载次数: 608

评分

参与人数 1满意度 +5 收起 理由
追风 + 5

查看全部评分

4 个回复

倒序浏览
amtath悬赏达人认证 活字格认证
论坛元老   /  发表于:2019-11-27 15:50:41
沙发
高产似母猪。
回复 使用道具 举报
Simon.hu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2019-11-27 18:28:43
板凳
这个词现在太火了~
回复 使用道具 举报
feng2575悬赏达人认证 活字格认证
银牌会员   /  发表于:2019-11-29 15:13:43
地板
牛牛
回复 使用道具 举报
Simon.hu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2019-12-24 13:47:01
5#
机智吧
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部