• 3. 通讯录例子：修改/删除联系人，暂存通讯录

演示如何修改/删除通讯录

演示如何将操结果作保存下来，刷新浏览器后数据不会丢失

弹窗保存按钮通过判断“弹窗操作”变量的内容来决定是新增操作还是修改操作

如果是修改操作，根据姓名得到当前操作数据的索引，通过索引更新通讯录列表（真实场景通过id确定操作的数据，而不是使用姓名，请参考后续访问接口例子）

---

为根面板新增一个文本框组件

选中这个文本框，点击“内容”右侧的曲别针为这个组件绑定变量

选择“本地变量”，选择“联系人”变量，选择“姓名”字段

选中表格组件，为“选中的行数据”绑定变量：“联系人”

绑定后用户点击某行/点击某行的“修改”按钮或“删除”按钮后，系统首先将此行的数据放入绑定的变量中，后续操作决定如何使用此绑定的变量

点击“在新窗口中预览”按钮

这是模拟用户看到的项目，点击某行查看文本框内容变化，别忘了点击界面编辑器右下角的“保存”按钮

下面显示如何实现修改功能

新增一个变量：“弹窗操作”，类型为“字符”

选中表格，点击“数据与交互”栏，点击“编辑行”右侧的“+新建触发动作”按钮，弹出菜单中点击“修改变量”

变量选择“弹窗操作”，操作选择“等于”，内容输入：“修改”两个字

再次点击“编辑行”右侧的“+新建触发动作”按钮，新增“隐藏/显示组件”动作：显示“编辑通讯录”弹窗

表格的“编辑行”完整的快捷触发事件列表如图右侧：

选中“编辑通讯录”弹窗中“保存”按钮，点击“点击”触发器第一个动作：“执行脚本”右侧的编辑按钮，修改这个动作的脚本

为“开始”节点下新增一个“判断变量”节点

点击“判断变量”功能

变量选择“弹窗操作”，判断方式选择“等于”，判断内容输入“新增”两个字

保存后如图14，当判断变量等于“新增”时，流程向右走，否则流程向下走

为判断变量节点新增一个判断失败向下走的节点

新增的节点类型为“判断变量”，参考图13，判断内容为“修改”，保存后当前的流程图如下：

新增一个变量，名称写“xxxx索引”，类型为数字

为第二个判断变量节点新增一个判定成功后执行的节点

此节点的目的是确定当前操作的数据是通讯录列表的第几行，判断方法是判断哪行的姓名字段等于“联系人”变量的“姓名”字段，找到后将这个索引放入刚刚创建的变量中

为这个查询索引节点新增一个下一步节点

把“通讯录列表”中相应的内容替换为“联系人”变量

替换好后应当关闭弹窗，点击“替换联系人”下面的红线

拖拽最下面的“小手”图标，移动到“隐藏/显示组件”节点上

连好后应如下图：

来到用户端查看效果，点击某一行的“修改”按钮

注意这里不能修改姓名字段，此例子使用姓名来做唯一标识使用

修改电话号码，保存

列表中电话号码已改变

下面演示如何实现删除功能

为表格的“删除行”新增一个脚本

为开始节点增加下一步节点

新增一个确定框

输入提示信息

当用户点击了确认框的确认按钮，流程向右走，否则流程向下走

新增一个确认后节点，类型为“修改变量”

过滤通讯录列表，凡是姓名不等于“联系人”变量的“姓名”字段：删掉

点击“删除”按钮查看效果

新增/修改/删除基本操作已经完成，但是每次刷新用户端后数据会恢复，下面演示保存将数据保存至浏览器的存储空间

点击“首页”，点击“进入页面后”右侧的“编辑脚本”

为新脚本的“开始”节点增加一个下一步节点：“读写变量”

操作方式选“读本地数据到变量”，写入的变量选“通讯录列表”

每次进入此页面时，首先从浏览器存储空间读数据到选中的变量

完整的脚本如下：

编辑修改功能时，首先判断“弹窗操作”变量，因此新增功能执行前应当先设置这个变量的内容，否则新增功能无法正常执行

选中“新增”按钮，为“点击”新增一个“修改变量”功能

要修改的变量选择“弹空操作”，操作方式选择“等于”，操作内容输入“新增”，此处“新增”两个字必须与图13中写的内容一致，否则无法正常执行

此时新增按钮的快捷触发列表如下图，先显示弹窗，然后修改“弹窗操作”变量内容为“新增”

动作列表是按顺序执行的，此时的功能是可以正确执行的，有些情况需要调整动作列表的执行顺序，可以拖拽列表改变顺序

此时先执行修改变量动作，再执行显示弹窗操作

回到主线，为实现数据持久化保存，进入页面时读数据只完成了一半，每次修改/删除联系人时也应当保存数据

再次编辑“保存”脚本

为关闭弹窗新增一个下一步节点

选择“读写变量”

操作方式选择“将变量写入本地数据”，要保存的变量选“通讯录列表”

完整的保存脚本如下，在新窗口中预览，现在无论如何刷新/重新进入，新增/修改操作后的数据都不会丢失

删除功能后如何保存数据请开动脑筋

本例演示的功能数据存储在当前浏览器的存储空间，换电脑/换浏览器等都无法同步数据，更完善的功能请看下集。。。