基于DOM+CSS3实现OrgChart组织结构图插件
2016-03-02 10:17
696 查看
jQuery OrgChart 是一个jQuery插件能够让帮你将一组嵌套的元素渲染成一个易于阅读的树形结构。易于使用。 你可以一个特定的树节来展示和隐藏一个树分支。可以采用CSS进行风格修改。还可以拖拉的方式来改变树节点的位置。
OrgChart 是一个基于纯DOM与CSS3的组织结构图插件
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/40deb299d8c6c8a2f6e03afb56d3d383.gif)
示例代码:
关于小编给大家介绍的基于DOM+CSS3实现OrgChart组织结构图插件 到此为止,希望对大家有所帮助!
OrgChart 是一个基于纯DOM与CSS3的组织结构图插件
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/40deb299d8c6c8a2f6e03afb56d3d383.gif)
示例代码:
// sample of core source code var datascource = { 'name': 'Lao Lao', 'title': 'general manager', 'relationship': ‘001’, 'children': [ { 'name': 'Bo Miao', 'title': 'department manager', 'relationship': ‘110’ }, { 'name': 'Su Miao', 'title': 'department manager', 'relationship': ‘111’, 'children': [ { 'name': 'Tie Hua', 'title': 'senior engineer', 'relationship': ‘110’ }, { 'name': 'Hei Hei', 'title': 'senior engineer', 'relationship': ‘110’ } ] }, { 'name': 'Yu Jie', 'title': 'department manager', 'relationship': ‘110’ } ] }; $('#chart-container').orgchart({ 'data' : datascource, 'depth': 2, 'nodeTitle': 'name', 'nodeContent': 'title' });
关于小编给大家介绍的基于DOM+CSS3实现OrgChart组织结构图插件 到此为止,希望对大家有所帮助!
相关文章推荐
- 解决Chrome谷歌浏览器不支持CSS设置小于12px的文字
- CSS外边距margin上下元素重叠
- DIV+CSS 中的 overflow:hidden清楚浮动作用
- CSS Day04 css核心基础
- rgba实现背景颜色透明
- js+css实现回到顶部按钮(back to top)
- 利用@media screen实现网页布局的自适应
- CSS学习(四)-css边框样式(下)
- js+css实现回到顶部按钮(back to top)
- 深入理解CSS背景
- CSS3学习
- DOM-设置样式
- DOM-元素的属性,样式
- 作品第四课----css函数一设置/读取对象的属性
- HTML-CSS文件链接HTML的三种方式
- CSS---@import
- CSS---!important
- CSS3弹性布局内容对齐(justify-content)属性使用详解
- CSS3媒介查询
- back to top 回到顶部按钮 css+js