穿梭框控件
金蝶云社区-Armstrong
Armstrong
2人赞赏了该文章 2,036次浏览 未经作者许可,禁止转载编辑于2021年02月04日 17:31:15
summary-icon摘要由AI智能服务提供

本文介绍了一种名为`kd.bos.form.control.TransferContainer`的控件,用于实现数据的双栏穿梭选择功能。该控件支持列表模式和树形模式,允许用户通过后端数据设置默认勾选或禁止的节点。文章还提供了插件代码示例,展示了如何在该控件中设置初始数据和获取用户操作后的选中节点信息。此外,还介绍了控件的属性设置,包括内框宽度、高度和标题,以及如何在插件中注册监听器和处理用户点击事件。

作用

完整展现数据,实现双栏穿梭选择框,常用于将多个项目从一边移动到另一边

控件对象

kd.bos.form.control.TransferContainer

视觉展示

列表模式(暂时缺图)

列表模式中,穿梭框左右俩框内容项都是以列表形式展开。同时可以通过后端发送来的数据选择默认勾选或默认禁止

树形模式

移动前

image

穿梭框1.png


移动后(可以直接点击一级、二级子节点添加到右边列表。)

image

穿梭框.png


树形模式中,穿梭框左框内容项以树形模式展开,右框以列表形式展开,但描述信息是节点路径。同时可以通过后端发送来的数据选择默认勾选或默认禁止


属性说明

属性名属性ID类型默认值说明
穿梭框内框宽度widthMaptrue设置穿梭框内框宽度(在设计器中配置控件属性 设置项 )
穿梭框内框高度heightMaptrue设置穿梭框内框高度(在设计器中配置控件属性 设置项 )
穿梭框内框标题titlesListtrue设置穿梭框内框左右俩框标题(在设计器中配置控件属性 设置项 )
树形展开showModelbooleanfalse设置是否已树形模式展开


插件代码范例

/** 
可以通过插件设置穿梭框左侧的内容(列表或树形列表),以及右侧选中的节点ID数组内容。
也可以获取到用户操作传输框后,穿梭框选中的节点信息
*/

import kd.bos.form.control.Control;
import kd.bos.form.control.TransferContainer;
import kd.bos.form.plugin.AbstractFormPlugin;
import kd.bos.form.transfer.TransferNode;
import kd.bos.form.transfer.TransferTreeNode;

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

public class TestPlugin extends AbstractFormPlugin {

    @Override
    public void afterCreateNewData(EventObject e) {

        // 显示风格为默认(列表模式)
        TransferContainer transferContainerDefaultStyle = this.getControl("transfercontainerap0");
        List<TransferNode> transferNodeListData = new ArrayList<>(2);
        transferNodeListData.add(new TransferNode(
                "0",            // 节点 ID
                "text0",        // text,节点显示内容
                false           // disabled,该节点是否允许选中
        ));
        transferNodeListData.add(new TransferNode(
                "1",            // 节点 ID
                "text1",        // text,节点显示内容
                true            // disabled,该节点是否允许选中
        ));
        transferContainerDefaultStyle.setTransferListData(transferNodeListData, Arrays.asList("0", "1"));   // 全选

        // 显示风格为树形(树形模式)
        TransferContainer transferContainerTreeStyle = this.getControl("transfercontainerap1");
        TransferTreeNode rootNode = new TransferTreeNode(
                "root",         // 节点 ID
                "textRoot",     // text,节点显示内容
                false           // disabled,该节点是否允许选中
        );
        rootNode.setIsOpened(Boolean.TRUE); // 展开子节点
        TransferTreeNode childNode = new TransferTreeNode(
                "child",        // 节点 ID
                "textChild",    // text,节点显示内容
                false           // disabled,该节点是否允许选中
        );
        rootNode.addChild(childNode);
        transferContainerTreeStyle.setTransferTreeNoteData(rootNode, Arrays.asList("child"));   // 只选中子节点。此方法似乎只能设置一个根节点
    }

    @Override
    public void click(EventObject evt) {
        Control control = (Control) evt.getSource();
        String key = control.getKey();
        if ("buttonap".equals(key)) {
            TransferContainer transferContainerDefaultStyle = this.getControl("transfercontainerap0");
            List<Object> selectedIdsDefaultStyle = transferContainerDefaultStyle.getSelectedData();  // 用户操作穿梭框后可获取选中的 ID 数组
            // 显示风格为默认的穿梭框选中数据格式
            if (!selectedIdsDefaultStyle.isEmpty()) {
                Map<String, Object> map = (Map<String, Object>) selectedIdsDefaultStyle.get(0);
                String id = (String) map.get("id");
                String text = (String) map.get("text");
                Boolean disabled = (Boolean) map.get("disabled");
            }

            TransferContainer transferContainerTreeStyle = this.getControl("transfercontainerap1");
            List<Object> selectedIdsTreeStyle = transferContainerTreeStyle.getSelectedData();  // 用户操作穿梭框后可获取选中的 ID 数组
            // 显示风格为树形的穿梭框选中数据格式
            if (!selectedIdsTreeStyle.isEmpty()) {
                Map<String, Object> map = (Map<String, Object>) selectedIdsTreeStyle.get(0);
                String id = (String) map.get("id");
                String text = (String) map.get("text");
                Boolean disabled = (Boolean) map.get("disabled");
                Boolean isOpened = (Boolean) map.get("isOpened");
                Boolean isChecked = (Boolean) map.get("isChecked");
            }
        }
    }

    @Override
    public void registerListener(EventObject e) {
        this.addClickListeners("buttonap");
    }
}

设置控件数据

构造列表形式的元数据(dataSource)

	// 显示风格为默认(列表模式)
        TransferContainer transferContainerDefaultStyle = this.getControl("transfercontainerap0");
        List<TransferNode> transferNodeListData = new ArrayList<>(2);
        transferNodeListData.add(new TransferNode(
                "0",            // 节点 ID
                "text0",        // text,节点显示内容
                false           // disabled,该节点是否允许选中
        ));
        transferNodeListData.add(new TransferNode(
                "1",            // 节点 ID
                "text1",        // text,节点显示内容
                true            // disabled,该节点是否允许选中
        ));
        transferContainerDefaultStyle.setTransferListData(transferNodeListData, Arrays.asList("0", "1"));   // 全选

构造树形形式的元数据(dataSource)

        // 显示风格为树形(树形模式)
        TransferContainer transferContainerTreeStyle = this.getControl("transfercontainerap1");
        TransferTreeNode rootNode = new TransferTreeNode(
                "root",         // 节点 ID
                "textRoot",     // text,节点显示内容
                false           // disabled,该节点是否允许选中
        );
        rootNode.setIsOpened(Boolean.TRUE); // 展开子节点
        TransferTreeNode childNode = new TransferTreeNode(
                "child",        // 节点 ID
                "textChild",    // text,节点显示内容
                false           // disabled,该节点是否允许选中
        );
        rootNode.addChild(childNode);
        transferContainerTreeStyle.setTransferTreeNoteData(rootNode, Arrays.asList("child"));   // 只选中子节点

穿梭框实现穿梭功能的按钮事件

    @Override
    public void click(EventObject evt) {
        Control control = (Control) evt.getSource();
        String key = control.getKey();
        if ("buttonap".equals(key)) {
            TransferContainer transferContainerDefaultStyle = this.getControl("transfercontainerap0");
            List<Object> selectedIdsDefaultStyle = transferContainerDefaultStyle.getSelectedData();  // 用户操作穿梭框后可获取选中的 ID 数组
            // 显示风格为默认的穿梭框选中数据格式
            if (!selectedIdsDefaultStyle.isEmpty()) {
                Map<String, Object> map = (Map<String, Object>) selectedIdsDefaultStyle.get(0);
                String id = (String) map.get("id");
                String text = (String) map.get("text");
                Boolean disabled = (Boolean) map.get("disabled");
            }

            TransferContainer transferContainerTreeStyle = this.getControl("transfercontainerap1");
            List<Object> selectedIdsTreeStyle = transferContainerTreeStyle.getSelectedData();  // 用户操作穿梭框后可获取选中的 ID 数组
            // 显示风格为树形的穿梭框选中数据格式
            if (!selectedIdsTreeStyle.isEmpty()) {
                Map<String, Object> map = (Map<String, Object>) selectedIdsTreeStyle.get(0);
                String id = (String) map.get("id");
                String text = (String) map.get("text");
                Boolean disabled = (Boolean) map.get("disabled");
                Boolean isOpened = (Boolean) map.get("isOpened");
                Boolean isChecked = (Boolean) map.get("isChecked");
            }
        }
    }

    @Override
    public void registerListener(EventObject e) {
        this.addClickListeners("buttonap");
    }
}

本文转载自:金蝶云苍穹基线文档

作者:未知

原文链接:https://feature.kingdee.com:2024/baseline_a/devdoc/?nav=fd#/ctrl/commonControl/transfercontrol/?id=穿梭框控件

赞 2