创建构件树

根据构件树对象控制显示隐藏，该构件树方法依赖于zTree. 构件树对象，规范格式如下：

var treeObj = [
  {
    name:"一层",
    //该节点是否被选中
    isChecked:true,
    //该节点下的子节点
    children:[
      {
        name:"墙",
        isChecked: true,
        children:[...]
      },
      ...
    ]
  },
  {
    name:"二层",
    isChecked:true,
    children:[
      {
        name:"墙",
        isChecked: false,
        children:[...]
      },
      {
        name:"门",
        isChecked: true,
        children:[...]
      },
      ...
    ]
  },
];

注意： 如果子节点中有一个或以上的节点被选中(isChecked=true), 那么父节点一定是被选中的(isChecked一定为true)；推荐使用zTree的构件树代码库，该代码库已经实现了上述的逻辑。

引入相关库

<!-- 引入jQuery和zTree -->
<link rel="stylesheet" href="./node_modules/@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/@ztree/ztree_v3/js/jquery.ztree.all.min.js"></script>

构件树控制显示隐藏、点选高亮

//获取构件树
Motor.Component.PropertiesTree(projectId).then((pTree)=>{
  var zTreeObj;
  var setting = {
      data: {
          key: {
              checked: "isChecked"
          }
      },
      check: {
          enable: true,       //设置是否显示checkbox复选框
      },
      callback: {
        onCheck: function (e, id, treeNode) {
            project.setVisiblityFromTree(treeNode);
            let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            let nodes = treeObj.getCheckedNodes();
            let designIds = [];
            $.each(nodes, function (i, item) {
                designIds.push(item.id);
                item.checkedOld = item.checked;
            })
        },
        onClick: function (e, id, treeNode) {
            let tmp = treeNode;
            let strArr = [];
            let options = {};
            for (let i = treeNode.level; i > 0; i--) {
                strArr.push(tmp.name)
                tmp = tmp.getParentNode();
            }
            if(strArr.length>0){
                strArr = strArr.reverse();
                strArr.forEach(function(str,index){
                    options[optionTemplate[index]] = str;
                })
            }
            else{
                options=undefined;
            }
            
            const guid = treeNode.level === 4 ? treeNode.id : '';
            $('#infobox').hide();
            project.resetComponentsDefaultColor();
            if(treeNode.level===0){
                project.setComponentsColor(Motor.Color.CYAN);
            }
            else if(guid!==""){
                project.setComponentsColor(Motor.Color.CYAN,[guid]);
            }
            else if(options){
                project.setComponentsColorByOption(options,Motor.Color.CYAN);
            }
        },
        onDblClick: function (e, id, treeNode) {
            if (!treeNode.children && treeNode.level === 4) {
                let component = project.getComponentFromTree(treeNode);
                let innerHTML = '';
                for (var key in component.infos) {
                    innerHTML += '<div title=' + component.infos[key] + '>' + key + ': ' + component.infos[key] + '</div>';
                }
                $('#infobox').html('<div title=' + component.guid + '>' + component.guid + '</div>' + innerHTML);
                $('#infobox').show();
                viewer.flyTo(component);
            }
            else {
                $('#infobox').hide();
            }
        },
        onExpand: function (event, treeId, treeNode) {
            if (treeNode.level === 3 && (!treeNode.children||tree.children.length)) {
                dynamicloadNodes(treeNode).then(function (data) {
                    treeNode.children = [];
                    zTreeObj.addNodes(treeNode, data)
                    reSetNodes(zTreeObj)
                })
            }
        }
    }
  };        // zTree 的参数配置
    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, pTree);
    zTreeObj.checkAllNodes(true);
    reSetNodes(zTreeObj);
    $('.tree_container').show();
});

function dynamicloadNodes(treeNode) {
    return Motor.Project.getChildNodesFromTree(treeNode);
}

// 重新设置数据
function reSetNodes(zTreeObj) {
    let node = zTreeObj.getNodes();
    node.forEach((rootnode)=>{
        rootTreeNodes.push(rootnode);
    })
    let nodes = zTreeObj.transformToArray(node);
    if (nodes.length > 0) {
        for (let i = 0; i < nodes.length; i++) {
            if (!nodes[i].children) {
                if (nodes[i].level === 3) {
                    nodes[i].isParent = true;
                }
                nodes[i].nocheck = true;
                zTreeObj.updateNode(nodes[i]);
            }
        }
    }
}