Twaver-HTML5基础学习(31)Tree基本使用

Tree

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-29 15:27:48
 */
import React, { useEffect, useState } from 'react'
import {
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
    returnRegisterImage,
    returnGroupFun
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
    const [network, setnetwork] = useState({})
    const init = () => {
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        network.invalidateElementUIs();
        document.getElementById("testID").appendChild(network.getView());
        // 设置最初的大小
        network.adjustBounds({ x: 0, y: 0, width: 800, height: 800 });
        // network.getView().style.backgroundColor = "#fff"
        network.getView().style.border = "2px solid #ccc"
        // var toolbar = document.createElement('div');

        var from = new twaver.Node();
        from.setName('From');
        from.setLocation(100, 100);
        box.add(from);
        var to = new twaver.Node();
        to.setName('To');
        to.setLocation(300, 300);
        to.setToolTip("哈哈哈")
        box.add(to);
        var liuqing = new twaver.Node();
        liuqing.setName('liuqing');
        liuqing.setLocation(500, 300);
        box.add(liuqing);
        var link = new twaver.Link(from, to);
        link.setName('Link');
        box.add(link);
       
        let treeObj = new twaver.controls.Tree(box)
        let treeDiv = treeObj.getView()
        treeDiv.style.width = "200px";
        treeDiv.style.height = "100%";
        document.getElementById("testID").appendChild(treeDiv);
        treeObj.getInnerColor = function (data) {
            return twaver.Colors.blue_dark;
        };
        // 树节点边框颜色 
        treeObj.getOuterColor = function (data) {
            return "#00ff00"; 
            // return twaver.Colors.orange_dark;
        };
 
    }
    useEffect(init, [])
    return (
        <>
            <p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={{ fontSize: "20px", paddingLeft: "50px" }}>
                <li>过滤器</li>
            </ul>
            {/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
        </>
    )
}
export default Demo

首先将box传入new twaver.controls.Tree(box)；
得到的treeObj需要我们设置宽高，通过getView获取dom元素，设置宽高，将dom添加至页面上document.getElementById(“testID”).appendChild(treeDiv);

另外树组件还支持勾选模式，通过树节点前面的勾选框表示节点的选中状态。设置勾选模式的方法如下：

/**
 * Tree提供四种勾选模式：
 * default:默认勾选模式,所有节点均可以勾选
 * children:孩子勾选模式,所有的分支节点可以勾选
 * descendant:子孙勾选模式,父节点被勾选,则其子孙节点自动被勾选
 * descendantAncestor:子孙祖先勾选模式,父节点被勾选，则子孙节点自动被勾选，子孙节点被勾选，则其祖先节点也自动勾选
 */
Tree.setCheckMode(v);//如tree.setCheckMode('descendantAncestor');

Tree引导线

在树中显示引导线，不仅美观，而且使得层次感清晰。TWaver中的Tree加入引导线的方法如下：

tree.setLineType(type)//type的值为'none'、'dotted'、'solid'

设置线条样式的方法有：

tree.setLineType('solid');//线条类型
tree.setLineColor('#000000');//线条颜色
tree.setLineAlpha(1);//线条透明度
tree.setLineThickness(1);//线条厚度
tree.setLineDash([10,2]);//线条虚线样式，在linetype为'dotted'情况下有效。

常见问题

修改tree展开闭合图标

twaver默认情况下，tree的toggle图标定义如下:

tree.getToggleImage = function (data) {
        if (data.getChildrenSize() > 0) {
            return this.isExpanded(data) ? this._expandIcon : this._collapseIcon;
        }
        return null;
    };

我们欲实现自定义的图标样式，以及控制网元是否显示Toggle图标，只需要重新实现该方法。
示例：tree中所有行均显示Toggle图标。

p.getToggleImage = function (data) {
        return twaver.Defaults.TREE_COLLAPSE_ICON;
    };

当然我们也可以使用自己的图标，记得要先注册图标。

tree监听事件

tree.addInteractionListener(function(evt) {
     console.log(evt);
     if(evt.kind == "doubleClick") {
          console.log(evt.data.getName());
     }
   });

tree监听勾选事件

tree.getView().addEventListener('change', function (e) {
    var data = e.target._checkData;
    console.log(data);
}, false);

控制显示复选框

//重写isCheckabke方法实现自定义复选框显示状态
tree.isCheckable = function(element) {
     if(element.getChildrenSize() == 0) {
           return true;
     }
     return false;};

是否显示当前被选中的网元

tree.setMakeVisibleOnSelected(false);

学习参考：TWaver Documents