1 插件介绍

树形控件，能够按层次显示节点，非常适合显示有层次的数据，如分组信息。树上的节点，能够按层次懒加载，也可以分批次加载。

2 控件编程模型

2.1 控件编程模型定义

树形控件的编程模型为TreeVew，派生自控件编程模型基类Control：

package kd.bos.form.control;
public class CodeEdit extends Control {

插件可以通过如下代码，获取到树形控件的编程模型实例：

TreeView treeView = this.getView().getControl(KEY_TREEVIEW1);

2.2 控件方法清单

树形控件，派生自控件基类，增加了如下方法：

2.3  控件方法的使用案例

案例说明：

• 动态加载树形控件的节点

• 按层次，分批加载树形控件的节点

• 响应树形节点点击事件，提示用户当前所选择的节点

• 支持多选时，即时获取到勾选的节点

• 可以通过拖拽，改变节点位置

实现方案：

• 捕获表单数据绑定事件beforeBindData，加载第一层节点

• 捕获树形控件的节点懒加载事件 queryTreeNodeChildren，加载下层子节点

• 捕获树形节点点击treeNodeClick事件，显示提示消息

• 捕获树形节点勾选事件 treeNodeCheck，显示提示消息

• 捕获树形控件的拖拽事件 treeNodeDragged，修改节点位置

示例代码：

package kd.bos.plugin.sample.dynamicform.pcform.control.bizcase;
 
import java.util.ArrayList;
import java.util.EventObject;
import java.util.List;
 
import kd.bos.dataentity.utils.StringUtils;
import kd.bos.entity.tree.TreeNode;
import kd.bos.form.control.TreeView;
import kd.bos.form.control.TreeView.TreeState;
import kd.bos.form.control.events.TreeNodeCheckEvent;
import kd.bos.form.control.events.TreeNodeCheckListener;
import kd.bos.form.control.events.TreeNodeClickListener;
import kd.bos.form.control.events.TreeNodeDragEvent;
import kd.bos.form.control.events.TreeNodeDragListener;
import kd.bos.form.control.events.TreeNodeEvent;
import kd.bos.form.control.events.TreeNodeQueryListener;
import kd.bos.form.plugin.AbstractFormPlugin;
 
public class TreeViewSample extends AbstractFormPlugin
                            implements TreeNodeClickListener, TreeNodeCheckListener, TreeNodeQueryListener, TreeNodeDragListener{
 
    private final static String KEY_TREEVIEW1 = "treeviewap1";
 
    /**
     * 注册控件事件
     */
    @Override
    public void registerListener(EventObject e) {
        super.registerListener(e);
 
        TreeView treeView = this.getView().getControl(KEY_TREEVIEW1);
        // 侦听树节点懒加载事件
        treeView.addTreeNodeQueryListener(this);
        // 侦听树节点点击事件，Click
        treeView.addTreeNodeClickListener(this);
        // 侦听树节点勾选事件，Check：特别注意字母拼接差异Check、Click
        treeView.addTreeNodeCheckListener(this);
        // 侦听树节点拖拽移动事件
        treeView.addTreeNodeDragListener(this);
    }
 
    /**
     * 界面加载，开始绑定数据事件
     */
    @Override
    public void beforeBindData(EventObject e) {
        super.beforeBindData(e);
        // 初始化树形控件的属性与第一层节点
        TreeView treeView = this.getView().getControl(KEY_TREEVIEW1);
        treeView.setMulti(true);    // 支持多选，不触发节点单击事件treeNodeClick，会触发节点双击事件treeNodeDoubleClick
        //treeView.setMulti(false);    // 不支持多选，不触发复选节点事件 treeNodeCheck
 
        TreeNode root = new TreeNode("", "node1", "root node");
        root.setChildren(new ArrayList<>());    // 需要懒加载的节点，需setChildren(new ArrayList<>())
 
        treeView.addNode(root);
        treeView.setRootVisible(true);            // 显示根节点
        treeView.expand("node1");                // 展开节点
        treeView.setDraggable(true);            // 允许节点被拖拽
        treeView.setDroppable(true);            // 允许接收拖拽进的内容
    }
 
    /**
     * 节点懒加载事件
     * @remark
     * 节点需要setChildren(new ArrayList<>())，当节点的children存在且isEmpty时，点击展开节点时触发事件
     */
    @Override
    public void queryTreeNodeChildren(TreeNodeEvent arg0) {
        String nodeId = (String)arg0.getNodeId();
 
        List<TreeNode> childNodes = this.loadChildNode(nodeId);
 
        TreeView treeView = this.getView().getControl(KEY_TREEVIEW1);
        treeView.addNodes(childNodes);
    }
 
    @Override
    public void treeNodeClick(TreeNodeEvent evt) {
        this.getView().showTipNotification(String.format("您点击了节点%s", evt.getNodeId()));
    }
 
    @Override
    public void treeNodeDoubleClick(TreeNodeEvent evt) {
        this.getView().showTipNotification(String.format("您双击了节点%s", evt.getNodeId()));
    }
 
    /**
     * 复选节点事件
     */
    @Override
    public void treeNodeCheck(TreeNodeCheckEvent arg0) {
        TreeView treeView = this.getView().getControl(KEY_TREEVIEW1);    // 树形控件
        TreeState treeState = treeView.getTreeState();                    // 树形控件的状态
 
        List<String> selectNodeIds = treeState.getCheckedNodeIds();
 
        if (selectNodeIds.isEmpty()){
            this.getView().showTipNotification("您没有勾选任何节点");
        }
        else {
            this.getView().showTipNotification(String.format("您勾选了节点%s", StringUtils.join(selectNodeIds.toArray(), ",")));
        }
    }
 
    /**
     * 拖拽节点时触发
     */
    @Override
    public void treeNodeDragged(TreeNodeDragEvent arg0) {
 
        String nodeId = (String)arg0.getNodeId();
        String fromParentId = (String)arg0.getFromParentId();
        String toParentId = (String)arg0.getToParentId();
 
        // 把被拖动的节点，从原来的父节点下删除，添加到新的父节点下
        TreeView treeView = this.getView().getControl(KEY_TREEVIEW1);
        treeView.deleteNode(nodeId);
 
        TreeNode node = new TreeNode(toParentId, nodeId, nodeId);
        treeView.addNode(node);
    }
 
    /**
     * 加载子节点
     * @param parentId
     * @return
     */
    private List<TreeNode> loadChildNode(String parentId){
 
        List<TreeNode> childNodes = new ArrayList<>();
 
        // 演示代码，直接创建新的节点返回，略过读取数据库的环节
        String id1 = parentId + ".1";
        TreeNode node1 = new TreeNode(parentId, id1, id1);
        node1.setChildren(new ArrayList<>());        // 需要懒加载下级节点
 
        childNodes.add(node1);
 
        String id2 = parentId + ".2";
        TreeNode node2 = new TreeNode(parentId, id2, id2);
        node2.setChildren(new ArrayList<>());        // 需要懒加载下级节点
 
        childNodes.add(node2);
 
        return childNodes;
    }
 
}

3 插件事件

树形控件，提供了如下插件事件：