帮一个做家谱管理的同学解决前端展示树形图的问题,偶然发现一个爆强的插件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