可以突出显示搜索找到的节点-Orgchart

时间:2019-02-19 17:46:17

标签: orgchart

是否可以突出显示在搜索中找到的节点,以便仅在其上显示动画效果? 选择找到的节点以获取该节点的访问点并在其上显示效果。

1 个答案:

答案 0 :(得分:0)

您可以使用

chart.center(nodeId);

chart.ripple(nodeId);

这里是一个例子:

var chart = new OrgChart(document.getElementById("tree"), {
            nodeBinding: {
                field_0: "name",
                field_1: "id"
            },
            nodes: [
                { id: 1, name: "Amber McKenzie" },
                { id: 2, pid: 1, name: "Ava Field" },
                { id: 3, pid: 1, name: "Peter Stevens" }
            ]
        });
        
document.getElementById("center").addEventListener("click", function(){
  chart.center(3);
});

document.getElementById("ripple").addEventListener("click", function(){
  chart.ripple(3);
});
html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin:0;
  overflow: hidden;
  font-family: Helvetica;
}
#tree{
  width:100%;
  height:100%;
}

#center{
  position: absolute;
  top: 40px;
  right: 40px;
  font-size: 30px;
  width: 140px;
  z-index: 5000;
}

#ripple{
  position: absolute;
  top: 90px;
  right: 40px;
  font-size: 30px;
  width: 140px;
  z-index: 5000;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<button id="center">center(3)</button>
<button id="ripple">ripple(3)</button>
<div id="tree"/>