使用jquery.orgchart實現欄目樹的配置與展示

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進行展示的，排列的圖標整齊。但是因爲其展示子孩子帶來的視覺晃動非常不便，最終還是棄用，但是如果直接打開展示所有的子節點還是非常方便配置和展示的。