移动端如何实现卡片分录分组后汇总一起展示

需求如下：

卡片分录的数据，按照某个字段或者某些字段值来分组，分组后，相同分类的行需要展示在一起，分组的信息需要作为标题在界面上展示。效果如下图所示：

上面的数据一共是9行，有三种分组，分组后要展示在一起。

难点如下：

1、卡片分录的数据顺序是乱的，分组后，需要重新排布，才能够实现效果。

2、分组成功后的标题展示。

解决方案demo如下：

卡片分录添加一个下拉列表字段，dicj_combofield，值有A、B、C、D。

1、分组排序问题，设计好分组来源dicj_combofield，循环卡片分录，先收集分组A的行对象，再收集B组的行对象。。。

再循环该集合，单据体重新设置行的值。代码如下

@Override

    public void beforeBindData(EventObject e) {

        super.beforeBindData(e);

        DynamicObjectCollection entryEntity = this.getModel().getDataEntity(true).getDynamicObjectCollection("entryentity");

        //一级下拉列表 A B C D

        List<DynamicObject> list = new ArrayList<>(entryEntity.size());

        //先分组A

        sortByKeyValue(entryEntity, "A", list);

        //再分组B

        sortByKeyValue(entryEntity, "B", list);

        sortByKeyValue(entryEntity, "C", list);

        sortByKeyValue(entryEntity, "D", list);

        for (int i1 = 0; i1 < list.size(); i1++) {

            //重新设置行的值

            entryEntity.set(i1, list.get(i1));

        }

        this.getView().updateView("entryentity");

    }

    private void sortByKeyValue(DynamicObjectCollection coll, String key, List<DynamicObject> list) {

        for (int j = 0; j < coll.size(); j++) {

            DynamicObject item = coll.get(j);

            if (key.equals(item.getString("dicj_combofield"))) {

                list.add(item);

            }

        }

2、分组后的标题展示：

设计如下：

卡片分录里面添加两个卡片容器，一个用于展示标题，一个用于展示内容，正常一行都有标题+内容，但是由于分组后，标题只需要一行展示即可，剩下分组行就不需要展示标题行了。即设置不可见即可。

最后就是修改标题。

代码如下：

@Override

    public void afterBindData(EventObject e) {

        super.afterBindData(e);

        //控制标题卡片是否展示

        DynamicObjectCollection entryEntity = this.getModel().getDataEntity(true).getDynamicObjectCollection("entryentity");

        //一级下拉列表 A B C D

        CardEntry cardEntry = this.getControl("entryentity");

        Set<String> set = new HashSet<>();

        for (int i = 0; i < entryEntity.size(); i++) {

            DynamicObject item = entryEntity.get(i);

            String key = item.getString("dicj_combofield");

            if (set.contains(key)) {

                cardEntry.setChildVisible(false, i, "dicj_title");

            } else {

                set.add(key);

                //改标题名称

                Map<String, Object> map = new HashMap<>();

                map.put("text", key + "组");

                Map<String, Object> mapNew = new HashMap<>();

                mapNew.put("dicj_labelap", map);

                cardEntry.setCustomProperties(cardEntry.getKey(), i, mapNew);

            }

        }

    }

数据如下：

最终实现效果如下：

以上方案仅供参考。