使用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进行展示的，排列的图标整齐。但是因为其展示子孩子带来的视觉晃动非常不便，最终还是弃用，但是如果直接打开展示所有的子节点还是非常方便配置和展示的。

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

树梅派配置ad-hoc网络
树梅派配置ad-hoc网络更新与安装 1.更改源/etc/apt/source.list: http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian ...
php栏目树,php生成无限栏目树的代码实例分享
本文主要介绍了php生成无限栏目树的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧栏目数组:$arr=Array( Array('cid' => 2,'cname' => '新闻 ...
基于jquery的复选树的插件
基于jquery的复选树的插件. 业务需求:复选树,带有多选功能,有子级被选中时父级需要有提示,层级不定,基于jquery. /** name: checkboxTree 复选树结构*//**输入的数 ...
jquery 遍历无限极树_jQuery parent（）和children（）树遍历函数示例
jquery 遍历无限极树 jQuery provides a lot of tree traversal functions that we can use to get the parent, c ...
使用OrgChart技术流程图(树状图)
基于OrgChart技术流程图[树状图] 一.实现效果图二.数据集三.实现思路 1.创建数据封装函数 2.将现有的数据处理成json数组 3.调用closureProcessing()函数,将js ...
jquery.orgchart.js 简单demo,自定义内容，自定义事件
orgchart简单demo GIT地址: https://github.com/Vlovely/orgchartDemo.git 预览图代码示例 <!DOCTYPE html> < ...
jquery.orgchart.js
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
魔客吧php登录界面模板,10款jquery实现的仿魔客吧模板展示特效
1.HTML5实现图形挤压变形动画今天我们要来分享一款很特别的HTML5动画特效,它是一款图形挤压动画.鼠标移动小球,该小球会和周围的几个小球产生挤压效果,从而使受挤压的小球产生相应的变形,利用HT ...
配置Grafana展示天融信防火墙日志
配置Grafana展示天融信防火墙日志环境要求: ELK版本要求 7.10+ Grafana 9.1.3 操作系统:CentOS7.9 ELK收集天融信防火墙日志_打攻人的博客-CSDN博客_elk ...

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

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

最新文章

热门文章