一看就会，超有用活字格技能：七十二，手机端主从表添加修改功能设计（饿了么）

选择困难症

本帖最后由 Eric.Liang 于 2020-5-18 17:39 编辑

今天给大家分享一下我最近研究的一个小小的成果，如何在移动端添加修改主从表？
问题的背景
这个问题如果这样说大家看起来可能不太容易理解，我举一个实际的用例，如何在移动端添加合同+合同详情（合同物品）表？如何在移动端添加订单+订单加详情表？
当然我这样说您可能不太理解，我在简单点说，
在PC上我们的主从表的设计很多的时候会使用这个设计
image.png932142944.png

但是在手机上，我们对于下面的子表很难设计

第一，我们的表格不支持大家的直接编辑，（很对人想要的编辑表格的话，我们都是推荐大家使用图文列表，但是图文列表似乎也不一定能满足这个效果）
第二，这个子表怎么添加数据，其实，即使图文列表页也不好添加数据

其实我想了很久，也没有找一个很好的方案，所以也一直没有给大家大家推荐很好的方式；
直到前段时间，有个人问我，活字格能不能做这个效果
手机商品列表选择.gif

一下子打开了我的思路，这不是就是大家每次买外卖，淘宝买东西的时候的效果（我自己一直在用但是脑子却没有跟上，真是失败啊），这个其实就是手机上设计主子表最好的效果。

那么活字格到底能不能做成这个效果呢？
当然是可以的，仔细看上面的动图，那就是使用活字格做出来的
（因为客户当时问我的时候就问我的是能不能像点外卖的时候一样的效果，为了防止大家知道我有多能吃，我就没有截我点外卖的图

）

问题的做法

这里我只写核心的问题的做法，肯定有很多热的需要提升的点，后面功能提升版希望各位格友集思广益。
首先，我这里一共有4张表，
商品分类，商品表（他们是字典表）
订单表，订单详情表（他们是每一个客户填写自己的订单的信息，是核心需要保存的数据）
image.png115169371.png

接下来，我们来说这个添加和修改的页面
其实看起来这个页面一共就是三部分，
第一部分，左侧的商品分类，为了简单起见，我直接使用了单选按钮，并将其设置成按钮样式；
有更高追求的老铁，可以使用图文列表（或按钮）配合上 条件格式 让这个样式变的更好看，就像上面的动图的效果
image.png412640685.png

第二部分，右侧的图文列表，当然图文列表要绑定一个表格，
image.png998580017.png

我这边为了简单起见这个表格设置一个查询条件，规定商品类型等于左侧的类型单选按钮；
当然大家也可以有其他做法来筛选这个表格

第三部分，就是下面的菜单，比较关键的就是这个红色数字的设置，我是使用了名称管理器，让他引用“页面2”的隐藏单元格中的值，至于这个单元格怎么设置，我们会在后面介绍；
image.png629203185.png

三个重要组成部分，介绍完了，我们开始讲最核心的逻辑

做法汇总
其实，这个设计的逻辑有很多种，
比如只要有人点击了一下加号，我直接更新数据库，这样做的好处是，简单，页面即使关闭了，也会保存下来；不过如果用户选择的东西比较多的时候，每次点一下要更新一次，可能会有卡顿；

典型做法介绍
我这里介绍一下我这种做法，还是让订单子表是松绑定：

开发难点分析
这个做法的难点在于，图文列表中的数量只能从他绑定的商品表中取来，但事实上，这个数字最好能从订单详情表中取出来
image.png831233520.png

如果不使用这样的设计，那么您自己要做很多绕的方案，而且都不一定能绕对；
那么用这种设计，我们应该如何解决这个问题呢？
我在图文列表外部放了2个文本框，左边的文本框去执行用户点击添加按钮。右边的文本框去执行用户点击减按钮的事；
当我点击+或者-的按钮，那么表格的当前行我们就知道了，当前点击的商品ID我就知道了，点一下，我就是根据不同的条件给订单子表的数量做添加删减操作
image.png901477355.png

所以，在图文列表的按钮中的按钮就很简单只是通过名称管理器给外面的文本框设值就行
image.png275899352.png

添加操作
添加操作就是看表格中有没有当前的商品，如果没有的话，加一条；如果有的话，就将原来的数字加1
image.png182120055.png

删减操作
删减操作看表格中的商品数量减一，如果数量为0的话，就把他删除掉
image.png936553955.png

图文列表中的数量
这个数量直接使用一个Vlookup去下面的订单详情表中去数量即可；
这个就变成自动变化了，我们就不用自己去维护了
image.png95410460.png

菜单上红点数字
小红点直接通过名称管理器引用这个格子，而这个格子中我们直接就使用公式计算当前的订单子表中数据的条数即可
image.png88612669.png

做好的示例工程
见附件

手机订单.fgcc (367.5 KB, 下载次数: 1043)

LukeLiu · LukeLiu

看到胡老板提到“跟点外卖一样的效果”，我就跟着他一起莫名兴奋，哈哈。

好呗，解锁打开手机，打开那个天天养我的APP，我照葫芦画瓢，仿照饿了么的点餐界面，一边流着口水，一边制作类似效果的原型。

现在，到底胡老板分享的这个方法6不6，我换了一层“皮”，大伙看看效果：

跟着帖子里的示例，改的不多。有一点的更改，左侧的类型选择，我使用了图文列表。因为我需要更多的视觉效果，比如点击效果，选中效果等，可以在图文列表编辑模板时，使用条件格式可以支持实现一些动态的视觉效果：

真正有那么一瞬间，惊愕的感觉，那是在看到，教程里提到的在图文列表里的按钮，操作了绑定图文列表之外的一张数据表。这就神奇了，我的格友。仔细看了，才明白：文本框上绑定命令，从而触发了对其他表的操作。哦，我的老天，小小文本框关键时刻居然是全局业务的实现关键。

说实话，对于手机端的主从表添加与修改功能的需求，之前我是遇到就头大，不知什么样的实现方法比较好，如何做到简洁不失优雅，我是一头雾水，多少次在不同的不归路上瞎胡切克闹。现在，我使用这篇教程提供的思路，制作了这个仿饿了么的点餐界面，以至于经常在这个点餐界面，闭着眼潇洒的点一大堆东西，假装自己很有钱的酱子。

		自动登录	找回密码
密码			立即注册

[易学技巧] 一看就会，超有用活字格技能：七十二，手机端主从表添加修改功能设计（饿了么）

评分

1 个回复

评分

讲师达人

悬赏达人

元老葡萄

活字格认证

活字格高级认证

微信认证勋章