实践案例 | 移动端实现可操作的表格展示解决方案

小编推荐

客户在配送、出库等业务操作环节，对于移动端操作的便利性和效率要求越来越高，而目前移动端默认提供的卡片化的展示难以支撑客户批量、便捷操作多项物料的要求，那移动端如何快速实现一屏显示多条数据且便于操作的需求呢？

本期文章为大家带来解决以上问题的一线案例，满足开发人员仅需少量简单开发即可实现以上功能的要求，让我们一睹为快吧。

撰稿人：金蝶-夏天的花生

【温馨提示：因企业业务场景存在不同程度的差异，此案例仅供参考，请根据现场实际业务情况探讨最优解决方案，并在上线前进行充分验证。】

一、业务背景

业务现状 

L集团作为国内知名整车制造公司，其制造车间在日常作业过程中，车间人员均配备了手持移动终端，帮助车间人员快速进行如批量操作零部件的配送、出库、仓库仓位移动等作业；

客户痛点分析

由于配送、出库等操作频繁，移动端数据操作的便利性则成为车间工作人员一大诉求，车间人员在一次终端操作过程中往往需要操作数十项物料，而手持设备限于屏幕大小天然难以满足用户一屏显示多条数据的需求，且由于产品移动端默认UE提供的均是卡片化展示，也难以支撑车间人员便捷地挑选数据进行操作。

客户诉求与期望

那么是否有一种方法，可以在移动端手持终端中提供如PC端列表般便捷挑选、操作数据，提升移动端手持终端设备操作效率、便利性与满意度呢？

二、解决方案

整体实现思路

1、 创建移动版动态表单页面

2、 使用锁定的文本字段来当做每一列的标题

3、 使用单据体作为展示数据的列表，在单据体中增加不显示标题的对应列字段（此时即可达到类似PC端列表展示数据的形式，同时支持数据选中及后续如提交、审核和定制化的功能等开发）

4、 在插件中获取业务单据数据返回单据体完成数据展示（参考代码可见附件）。

关键操作步骤举例

如下以销售订单移动端如何实现类PC表格为例，说明实现步骤。展示效果如图，动态操作展示可见附件

图1 用户可操作的移动端表格

步骤1

路径：    开发服务云-开发平台

新增【销售订单移动列表】移动表单，如图，增加搜索区、过滤区、总计、标题区以及单据体数据展示区，以此构建一个完整的移动端列表。其中，关键要点是在构建单据体数据展示区时，每个字段均由卡片容器布局构成。

关于元数据的绘制详情可导入元数据查看（附件已提供元数据包，注意导入时需修改元数据xml文件的供应商标识）。

图2 销售订单移动列表开发界面

步骤2

路径：开发服务云-开发平台

通过开发表单插件，实现页面搜索、过滤、总计功能，并实现单据体数据绑定、展示功能。参考插件代码可用附件中MobSmSalOrderListPlugin，插件中实现了页面的搜索、过滤、总计以及查询销售订单数据并返回构建单据体展示数据的功能。

图3 插件注册

步骤3

路径：开发服务云-开发平台

如下介绍如何在表格中增加一列，以在移动端中展现表格式列表，实现一屏多显数据的需求：    

以增加【含税】字段为例，在单据体中增加展示字段，步骤如下：

    1）在标题区中增加【含税】的标题。

    2）在单据体中增加【含税】字段，注意字段类型和销售订单实体中的【含税】字段保持一致。

图4 增加【含税】的标题

图5 注意字段类型保持一致

    3）在插件代码销售订单的查询中，增加