移动表格

栏目：云苍穹知识作者：金蝶来源：金蝶云社区发布：2024-09-23浏览：1

移动表格

补丁号：COSMIC.V4.0.004_0729

特性效果展示

背景说明

移动端不支持表格展示，对于一些需要表格类型的用户，目前设计器中不存在表格，只能通过动态创建方式去创建表格，但动态创建的方式学习成本很高，实现一个表格必须依赖例子及要与平台进行大量的细节沟通，不直观且会浪费大量时间，为了方便用户使用，故需要增加移动端的表格相关控件。

应用范围

1. 页面范围

1）PC单据自带的移动表单

2）PC基础资料自带的移动表单

3）移动表单（只能使用自定义表格）

4）移动布局（不能使用自定义表格）

2. 数据源

主实体数据源：PC单据、PC基础资料自带的移动表单拥有主数据源

插件数据源：可由插件自定义取数，且在一个移动表格中，不同字段数据源可不一样

3. 表格类型

自定义表格：仅支持插件数据源

单据体表格：需绑定主实体的一个单据体作为数据源

功能说明

可以视为移动端单据体(卡片分录)的表格视图，通过绑定数据源实体及字段从PC实体字段继承过来(修改字段映射相当于实体删除原字段/添加新字段)

1. 特点

1）元数据通过动态发给前端;

2）移动端视图上不存在PC前端控件;

3）移动端与PC共用实体及模型

2. 创建列

将PC端字段属性信息与移动表格字段的个性化属性相合并动态发往前端

3. 取数

由于model实体PC和移动端使用同一套，可以直接使用model取数

4. 格式化

由于缺少前端字段控件，所以是读取PC元数据构建前端字段

单据体表格

在移动表单界面选择移动表格控件，并绑定主实体的单据体数据源
选择想要的移动表格列字段，并设置字段隐射，目前只有文本、整数、小数、日期、时间、金额、图片7种几种基础字段；
保存后直接预览，即可展示单据体中保存的数据信息；

自定义表格
数据源选择自定义表格，可以完全通过插件干预，动态创建表格列等，具体参考代码示例；

代码示例

单据体表格扩展

import kd.bos.data.BusinessDataReader;
import kd.bos.dataentity.entity.DynamicObject;
import kd.bos.dataentity.entity.DynamicObjectCollection;
import kd.bos.dataentity.entity.LocaleString;
import kd.bos.entity.EntityType;
import kd.bos.form.ClientProperties;
import kd.bos.form.mcontrol.mobtable.MobTable;
import kd.bos.form.mcontrol.mobtable.MobTableDataProvider;
import kd.bos.form.mcontrol.mobtable.MobTablePackageDataHandler;
import kd.bos.form.mcontrol.mobtable.MobTableRowData;
import kd.bos.form.mcontrol.mobtable.events.BeforeCreateMobTableColumnsEvent;
import kd.bos.form.mcontrol.mobtable.events.IBeforeCreateMobTableColumnsListener;
import kd.bos.form.mcontrol.mobtable.events.IMobTableDataProviderListener;
import kd.bos.form.mcontrol.mobtable.events.IMobTablePackageDataHandlerListener;
import kd.bos.form.mcontrol.mobtable.events.MobTableDataProviderArgs;
import kd.bos.form.mcontrol.mobtable.events.MobTableDataProviderEvent;
import kd.bos.form.mcontrol.mobtable.events.MobTableHandleResult;
import kd.bos.form.mcontrol.mobtable.events.MobTablePackageDataHandlerArgs;
import kd.bos.form.mcontrol.mobtable.events.MobTablePackageDataHandlerEvent;
import kd.bos.form.mcontrol.mobtable.tablecolumn.MobTableColumn;
import kd.bos.form.plugin.AbstractFormPlugin;
import kd.bos.metadata.entity.commonfield.DateTimeField;
import kd.bos.metadata.entity.commonfield.IntegerField;
import kd.bos.metadata.entity.commonfield.TextField;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * 此示例为绑定单据体表格的情况
 * 实现功能:
 * 1. 动态创建列
 * 2. 替换数据源
 * 3. 格式化赋值
 */
public class MobTablePluginSample extends AbstractFormPlugin implements IBeforeCreateMobTableColumnsListener {

    private static final String KEY_TEXT = "ktext";
    private static final String KEY_INTEGER = "kinteger";

    @Override
    public void initialize() {
        MobTable mobTable = getControl("mobtableap");
        mobTable.addBeforeCreateMobTableColumnsListener(this);
        mobTable.addMobTableDataProviderListener(new IMobTableDataProviderListener() {
            @Override
            public void createMobTableDataProvider(MobTableDataProviderEvent mobTableDataProviderEvent) {
                mobTableDataProviderEvent.setMobTableDataProvider(new MyMobTableDataProvider());
            }
        });
        mobTable.addMobTablePackageDataHandlerListener(new IMobTablePackageDataHandlerListener() {
            @Override
            public void createMobTablePackageDataHandler(MobTablePackageDataHandlerEvent mobTablePackageDataHandlerEvent) {
                mobTablePackageDataHandlerEvent.setMobTablePackageDataHandler(new MyMobTablePackageDataHandler());
            }
        });
    }
@Override
    public void beforeCreateMobTableColumns(BeforeCreateMobTableColumnsEvent event) {
        List<MobTableColumn> mobTableColumns = event.getMobTableColumns();
        // 调整已有日期列格式化属性
        for (MobTableColumn col : mobTableColumns) {
            if (col.getKey().equals("datemobtablecolumnap")) {
                DateTimeField dateTimeField = new DateTimeField();
                Map<String, Object> editor = dateTimeField.createEditor();
                editor.put(ClientProperties.DisplayFormatString, "YYYY年MM月DD日");
                col.setCustomEditor(editor);
            }
        }

        List<MobTableColumn> mobTableColumns2 = new ArrayList<>();

        // 动态添加一个文本列
        TextField textField = new TextField();
        // 设置编辑器属性
        textField.setMustInput(true);

        MobTableColumn mobTableColumn1 = new MobTableColumn();
        // 列标识
        mobTableColumn1.setFieldKey(KEY_TEXT);
        // 列数据映射标识
        mobTableColumn1.setMobTableField(KEY_TEXT);
        mobTableColumn1.setCaption(new LocaleString("文本列"));
        mobTableColumn1.setForeColor("#99d92b");
        mobTableColumn1.setCustomEditor(textField.createEditor());

        // 动态添加一个整数列
        IntegerField integerField = new IntegerField();
        integerField.setScale(2);
        MobTableColumn mobTableColumn2 = new MobTableColumn();
        mobTableColumn2.setFieldKey(KEY_INTEGER);
        mobTableColumn2.setMobTableField(KEY_INTEGER);
        mobTableColumn2.setCaption(new LocaleString("整数列"));
        // 强制覆盖自定义编辑器
        mobTableColumn2.setCustomEditor(integerField.createEditor());
        // 采用自定义编辑器以下列属性不生效
        mobTableColumns2.add(mobTableColumn1);
        mobTableColumns2.add(mobTableColumn2);

        mobTableColumns2.addAll(mobTableColumns);

        mobTableColumns.clear();
        mobTableColumns.addAll(mobTableColumns2);
    }
}
/**
 * 自定义取数provider
 * 数据映射模式下:原有逻辑会根据pkId等信息读取
 */
class MyMobTableDataProvider extends MobTableDataProvider {
    @Override
    public DynamicObjectCollection getData(MobTableDataProviderArgs args) {
        // 单据pk
        Object pkId2 = args.getPkId();
        // 实体(移动端和PC端共用实体)
        EntityType entityType = args.getEntityType();
        // 映射分录标识
        String entryKey = args.getEntryKey();
        DynamicObject dataEntity = BusinessDataReader.loadSingle(1195775182061499392L, entityType);
        return dataEntity.getDynamicObjectCollection(entryKey);
    }
}

/**
 * 自定义数据处理handler
 * 重写handleData返回result数据处理结果，理论上此接口可以将数据完全重写
 */
class MyMobTablePackageDataHandler extends MobTablePackageDataHandler {

    private static final String KEY_TEXT = "ktext";

    @Override
    public MobTableHandleResult handleData(MobTablePackageDataHandlerArgs args) {
        MobTableHandleResult handleResult = super.handleData(args);
        List<MobTableRowData> mobTableRowDataList = handleResult.getMobTableRowDataList();
        int index = 0;
        for (MobTableRowData mobTableRowData : mobTableRowDataList) {
            mobTableRowData.setValue(KEY_TEXT, "abc" + index++);
        }
        return handleResult;
    }
}

完全自定义表格

import kd.bos.form.ClientProperties;
import kd.bos.form.mcontrol.mobtable.MobTable;
import kd.bos.form.mcontrol.mobtable.MobTablePackageDataHandler;
import kd.bos.form.mcontrol.mobtable.MobTableRowBuilder;
import kd.bos.form.mcontrol.mobtable.MobTableRowData;
import kd.bos.form.mcontrol.mobtable.events.BeforeCreateMobTableColumnsEvent;
import kd.bos.form.mcontrol.mobtable.events.IBeforeCreateMobTableColumnsListener;
import kd.bos.form.mcontrol.mobtable.events.IMobTablePackageDataHandlerListener;
import kd.bos.form.mcontrol.mobtable.events.MobTableHandleResult;
import kd.bos.form.mcontrol.mobtable.events.MobTablePackageDataHandlerArgs;
import kd.bos.form.mcontrol.mobtable.events.MobTablePackageDataHandlerEvent;
import kd.bos.form.mcontrol.mobtable.tablecolumn.MobTableColumn;
import kd.bos.form.plugin.AbstractFormPlugin;
import kd.bos.metadata.entity.commonfield.DateTimeField;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class MobTablePluginSample2 extends AbstractFormPlugin implements IBeforeCreateMobTableColumnsListener {

    @Override
    public void initialize() {
        MobTable mobTable = getControl("mobtableap");

        mobTable.addBeforeCreateMobTableColumnsListener(this);

        mobTable.addMobTablePackageDataHandlerListener(new IMobTablePackageDataHandlerListener() {
            @Override
            public void createMobTablePackageDataHandler(MobTablePackageDataHandlerEvent mobTablePackageDataHandlerEvent) {
                mobTablePackageDataHandlerEvent.setMobTablePackageDataHandler(new MyMobTablePackageDataHandler2());
            }
        });
    }
@Override
    public void beforeCreateMobTableColumns(BeforeCreateMobTableColumnsEvent event) {
        List<MobTableColumn> mobTableColumns = event.getMobTableColumns();
        // 调整已有日期列格式化属性
        for (MobTableColumn col : mobTableColumns) {
            if(col.getKey().equals("datemobtablecolumnap")) {
                DateTimeField dateTimeField = new DateTimeField();
                Map<String, Object> editor = dateTimeField.createEditor();
                editor.put(ClientProperties.DisplayFormatString, "YYYY年MM月DD日");
                col.setCustomEditor(editor);
            }
        }
    }
}

/**
 * 自定义数据处理handler
 * 重写handleData返回result数据处理结果，理论上此接口可以将数据完全重写
 */
class MyMobTablePackageDataHandler2 extends MobTablePackageDataHandler {

    @Override
    public MobTableHandleResult handleData(MobTablePackageDataHandlerArgs args) {
        List<MobTableColumn> mobTableColumns = args.getMobTableColumns();

        MobTableHandleResult mobTableHandleResult = new MobTableHandleResult();
        List<MobTableRowData> mobTableRowDataList = new ArrayList<>();
        for(int index = 0; index < 5; index++) {
            // 创建行数据并赋值
            MobTableRowData mobTableRowData = MobTableRowBuilder.buildTemplateRowData(index, mobTableColumns);
            mobTableRowData.setValue("textmobtablecolumnap", "value" + index);
            mobTableRowData.setValue("integermobtablecolumnap", 100 + index);
            mobTableRowDataList.add(mobTableRowData);
        }

        mobTableHandleResult.setMobTableRowDataList(mobTableRowDataList);
        // 额外格式化信息如日期、金额，支持重写
        mobTableHandleResult.setFmtInfo(getFmtInfo(args));
        return mobTableHandleResult;
    }
}