两棵树（树型控件）实现穿梭框的效果（二）

关键字：树型控件、穿梭框效果

前言：

上一篇我们介绍了页面的绘制：两棵树（树型控件）实现穿梭框的效果（一）

本篇我们来初始化树型控件的数据。

二、思路与方案：

1.首先是注册监听，把左右两棵树和其他的点击都注册上来。注意要实现TreeNodeClickListener接口。

/**
     * 注册监听，注册左侧树、右侧树、建表数据和预插数据的上传面板
     */
    @Override
    public void registerListener(EventObject e) {
        //左侧树
        TreeView tree = this.getView().getControl(TREEVIEW_AP);
        //节点点击事件
        tree.addTreeNodeClickListener(this);
        //右侧树
        TreeView selectTree = this.getView().getControl(TREEVIEW_SELECT);
        selectTree.addTreeNodeClickListener(this);
        this.addClickListeners(BTN_ADDNODE, BTN_DELNODE, NEXT_STEP, BEFORE_STEP, EXPORT);
        this.addItemClickListeners("sourcetoolbarap");
    }

2.在页面数据初始化完成之后初始化树数据。

左树的初始化核心要构造一个treeNode对象作为根节点（root），root节点下有子节点集合，一直到叶子节点。

右树的初始化暂时只初始化根节点即可。当点击按钮的时候再动态的给右侧的树赋值。

三、实现过程

代码如下：

@Override
    public void afterCreateNewData(EventObject e) {
        // 左侧树
        // 根节点初始化
        TreeNode leftRoot = this.leftTreeInit();
        // 左侧树控件
        TreeView leftTree = this.getView().getControl(TREEVIEW_AP);
        // 节点信息添加到树中
        leftTree.addNode(leftRoot);
        // 设置根节点不可见
        leftTree.setRootVisible(false);

        // 右侧树
        // 根节点初始化
        TreeNode rightRoot = new TreeNode("", ROOTNODE, "已选数据");
        rightRoot.setIsOpened(true);
        TreeView rightTree = this.getView().getControl(TREEVIEW_SELECT);
        rightTree.addNode(rightRoot);
        // 设置根节点不可见
        rightTree.setRootVisible(false);
    }

/**
     * 构造左侧树所有节点
     * 这里没有考虑所有叶子节点都没数据的情况，因为外面导出按钮需要判断一次
     *
     * @return
     */
    private TreeNode leftTreeInit() {
        TreeNode leftRoot = new TreeNode("", ROOTNODE, "数据列表");
        leftRoot.setIsOpened(true);
        QFilter enable = new QFilter(ENABLE, QCP.equals, "1");
        TreeNode treeNode;
        // 构造XX类型的节点
        treeNode = this.consXXNode(enable);
        if (null != treeNode) {
            leftRoot.addChild(treeNode);
        }
        // 构造YY节点
        treeNode = this.consYY();
        if (null != treeNode) {
            leftRoot.addChild(treeNode);
        }
        // 构造ZZ节点
        treeNode = this.consZZ(enable);
        if (null != treeNode) {
            leftRoot.addChild(treeNode);
        }

        // 左树构建完序列化之后存储到页面缓存
        String leftTreeNodesValue = SerializationUtils.toJsonString(leftRoot);
        this.getPageCache().put(LEFT_ROOT, leftTreeNodesValue);

        return leftRoot;
    }

 /**
     * 构造子节点
     */
    private TreeNode consXX(QFilter enable) {
        Map<Object, DynamicObject> XXMap =
                BusinessDataServiceHelper.loadFromCache("基础资料标识", "number，name", new QFilter[]{enable});
        return consTreeNode(XXMap, "类型", "前缀");
    }

/**
     * 构建指定类型的treeNode数据,没有子节点的返回null
     *
     * @param baseDataMap 数据
     * @param type        类型
     * @param prefix      构建node的前缀
     * @return
     */
    private TreeNode consTreeNode(Map<Object, DynamicObject> baseDataMap, String type, String prefix) {
        if (null != baseDataMap && baseDataMap.size() > 0) {
            List<TreeNode> nodeList = new ArrayList<>(baseDataMap.size());
            TreeNode treeNode;
            for (DynamicObject value : baseDataMap.values()) {
                String number = value.getString(NUMBER);
                String name = value.getString(NAME);
                treeNode = new TreeNode(type, prefix + number, name);
                nodeList.add(treeNode);
            }
            TreeNode node = new TreeNode(ROOTNODE, type, modelMap.get(type));
            node.addChildren(nodeList);
            return node;
        }
        return null;
    }

四、效果图：

最终实现的效果：左树已经初始化完成了

五、注意事项：

1. 构建完成的左侧树一定要缓存起来，这里不自己缓存后续没有其他方式获取，平台没有提供获取所有节点的方法。最好缓存到页面缓存中。

2. 个人建议最好先构造叶子节点，然后层层向上构造树节点，最好依赖一些算法思想。（个人习惯，仅供参考）

3. 左右树的根节点初始化成一样的，方便后续的使用。这个阶段左树有子节点，右树没有子节点。

4. 构造节点的时候，要确保id唯一，所以这里加入了类型前缀。大家根据自行的情况确保。

5. 这里构造只有三级的树，涉及到多级节点自行根据算法构造。