使用jquery.orgchart实现栏目树的配置与展示

最新推荐文章于 2025-06-19 09:15:51 发布

yimi34

最新推荐文章于 2025-06-19 09:15:51 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：栏目树 orgchart ie8兼容

本文链接：https://blog.csdn.net/yimi34/article/details/82496743

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文档介绍了如何使用jquery.orgchart库创建栏目树，包括引入必要的js和css文件，设置HTML结构，初始化控件。针对IE8的兼容性问题，进行了代码调整，但发现因子节点动态展示导致的视觉晃动影响用户体验，最终虽然考虑了全展开子节点的方案，但并未完全解决展示效果的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先引入需要的js和css文件，必需的为：jquery-1.8.3.min.js，jquery.orgchart.js

2.在html树中，定义id值为chart-container的节点

<div id="chart-container"></div>

3.在页面加载的js中，定义组织树的结构

 var datascource = {
        'name': '根节点',
        'children': [
          { 'name': '一级节点1', 'url': '1.html',
            'children': [
              { 'name': '二级节点1' },
              { 'name': '二级节点2' },
			  { 'name': '二级节点3' },
			  { 'name': '二级节点4' },
			  { 'name': '二级节点5' },
			  { 'name': '二级节点6' },
			  { 'name': '二级节点7' },
			  { 'name': '二级节点8' }
            ]
          },
          { 'name': '一级节点2', 'url': '2.html' },
          { 'name': '一级节点3', 'url': '3.html',
			'children': [
              { 'name': '二级节点9' },
              { 'name': '二级节点10','collapsed': true,
				'children':[
				{ 'name': '三级节点1' },
				{ 'name': '三级节点2' },
				{ 'name': '三级节点3' },
				{ 'name': '三级节点4' },
				{ 'name': '三级节点5' },
				{ 'name': '三级节点6' }
				]}
            ]}
        ]
      };

4.使用orgchart初始化该控件

 $('#chart-container').orgchart({
        'visibleLevel': 2,
        'pan': false,
        'datas' : datascource,
		'nodeContent': 'url'
      });

5.以上为chrome，google中可以运行的版本。但是现在要求IE8兼容，并根据项目的需要对页面的样式及事件进行一定的修改，特意对orgchart进行了部分修改，并对ie8 js进行了兼容，达到效果图如下：

6.但是实现的效果图仍然不符合项目的需要。是每个节点所占的空间会根据其子孩子的展示而进行变动，给用户的感官非常不便。该栏目树之间的线主要是通过table的border进行展示的，排列的图标整齐。但是因为其展示子孩子带来的视觉晃动非常不便，最终还是弃用，但是如果直接打开展示所有的子节点还是非常方便配置和展示的。