爆强的树插件orgchart

帮一个做家谱管理的同学解决前端展示树形图的问题,偶然发现一个爆强的插件orgchart 。

实现思路:

1、使用了springboot + freemark 的搭配。

2、查询所有的相关数据,利用freemark 在展示页面内的拼凑全局变量的符合格式的数组。

3、使用js,循环该数组,添加数据到数组中。

4、数据添加完毕,插件渲染效果。

样例代码:

<script>
    var data = [
    // 此处使用freemark 拼凑出需要的数据
    ];
</script> 
<canvas id="canvas1" width="800" height="600"></canvas>

<script type="text/javascript">
    var o = new orgChart();
        for() {
        o.addNode('', '', '', 'Root node');// 利用for循环把数据添加到插件中;
        } 
       o.drawChart('canvas1');
 </script>

 

官方demo:https://jvloenen.home.xs4all.nl/orgchart/sample.htm

0

发表评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.