orgChart的简单使用,实现树状图、组织结构图结构

还不知道这个插件的小伙伴可以先去官网下载,orgchart官网链接

呐,下载下来就是这样的:

我们把他解压出来:

点进去以后,直接找到index.html文件用浏览器打开,就是这样的啦:

这1--24都是样式样例了,大家可以任意点进去查看啦、学习套用啦。。。

接下来就附上我所写出来的效果图【我修改了一点它的js和css代码,红色为所占百分比】:

然后附上代码,仅供参考,如有不足,还请赐教:

首先数据格式:【name,title,children】

"data": [
        {
            "children": [
                {
                    "children": [
                        {
                            "children": [
                                {
                                    "children": [],
                                    "name": "车间26",
                                    "title": "演示子表4:70%"
                                },
                                {
                                    "children": [],
                                    "name": "车间27",
                                    "title": "演示子表5:80%"
                                },
                                {
                                    "children": [],
                                    "name": "车间28",
                                    "title": "演示子表6:80%"
                                },
                                {
                                    "children": [],
                                    "name": "车间29",
                                    "title": "演示子表7:80%"
                                },
                                {
                                    "children": [],
                                    "name": "车间30",
                                    "title": "演示子表8:90%"
                                }
                            ],
                            "name": "低压母表20",
                            "title": "演示子表1:50%"
                        }
                    ],
                    "name": "高压子表23",
                    "title": "演示子表1:60%"
                },
                {
                    "children": [
                        {
                            "children": [
                                {
                                    "children": [],
                                    "name": "车间31",
                                    "title": "演示子表9:90%"
                                },
                                {
                                    "children": [],
                                    "name": "车间32",
                                    "title": "演示子表10:90%"
                                },
                                {
                                    "children": [],
                                    "name": "车间33",
                                    "title": "演示子表11:40%"
                                },
                                {
                                    "children": [],
                                    "name": "车间34",
                                    "title": "演示子表12:40%"
                                }
                            ],
                            "name": "低压母表21",
                            "title": "演示子表2:60%"
                        }
                    ],
                    "name": "高压子表24",
                    "title": "演示子表2:70%"
                },
                {
                    "children": [
                        {
                            "children": [
                                {
                                    "children": [],
                                    "name": "车间35",
                                    "title": "演示子表13:40%"
                                },
                                {
                                    "children": [],
                                    "name": "车间36",
                                    "title": "演示子表14:30%"
                                },
                                {
                                    "children": [],
                                    "name": "车间37",
                                    "title": "演示子表15:30%"
                                }
                            ],
                            "name": "低压母表22",
                            "title": "演示子表3:60%"
                        }
                    ],
                    "name": "高压子表25",
                    "title": "演示子表3:70%"
                }
            ],
            "name": "高压母表19",
            "title": "演示母表1:50%"
        }
    ],
在页面中引入 jQuery , jquery.orgchart.js 插件

$('#chart-container').orgchart({
  'data' : data,
  'nodeContent': 'title',
  'visibleLevel':4//展开几级
});
附上一张官网的样例 f12 后的代码样例:

然后详解一下orgchart有哪些参数及其含义:

data【json or String】:数据

pan 【boolean 默:flase】:通过鼠标拖放来控制OrgChart

zoom【boolean 默:false】:通过鼠标滚轮放大或缩放OrgChart

zoominLimit【number 默:7】:设置放大限制

zoomoutLimit【number 默:0.5】:设置缩放限制

direction【String 默:t2b】:T2B:"从上到下",B2T:"从底到上",L2R:"左到右",R2L:"向左到右"

verticalLevel【integer(>=2)】:

toggleSiblingsResp【boolean 默:false】:通过单击左/右箭头分别显示/隐藏左/右兄弟节点

ajaxURL【json】:不同的优先级提供了发送不同节点的Ajax请求的URL

visibleLevel【number】:默认展开几级

nodeId【String 默:id】:将数据源的一个属性设置为每个OrgChart节点的唯一标识符。

nodeTitle【String 默:name】:将数据源的一个属性设置为OrgChart节点标题段的文本内容

nodeContent【String】:将数据源的一个属性设置为OrgChart节点的内容部分的文本内容。

nodeTemplate【function】:它是一个模板生成函数,用于定制任何复杂的节点内部结构

createNode【function】:它是用于自定义每个OrgCad节点的回调函数

parentNodeSymbol【String 默:fa-users】:使用图标暗示该节点有子节点

exportButton【boolean 默:false】:是否启用OrgChar的导出按钮

exportFilename【String 默:OrgChart】:当输出当前的OrgChart作为图片时,它是文件名。

exportFileextension【String 默:png】:可用的值是PNG和PDF。

chartClass【String】:当你想在一个页面上实例化多个orgcharts 时,你应该添加不同的类名来区分它们。

draggable【boolean 默:false】:用户可以拖动和删除OrgChart节点

dropCriteria【function】:用户可以构造自己的标准来限制拖动节点和删除区域之间的关系

initCompleted【function】:经常知道您的表何时已经完全初始化、数据加载和呈现,尤其是当使用Ajax数据源时

 


转载:https://blog.csdn.net/qq_40594137/article/details/80910040

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
智慧校园整体解决方案是响应国家教育信息化政策,结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础,旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变,通过自动数据采集、智能分析和按需服务,实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通,确保系统能够满足不同用户角色的需求,并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面,构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等,以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能,增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术,实现人员和设备的智能管理,提高校园运营效率。 智慧教学部分,方案提供了智慧学习系统和精品录播教室方案,支持专业级学习硬件和智能化网络管理,促进个性化学习和教学资源的高效利用。同时,教学质量评估中心和资源应用平台的建设,旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理,通过智慧教室管理系统实现教室环境的智能控制和能效管理,打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设,将作为智慧校园的核心和入口,提供教务、一卡通、图书馆等系统的集成信息。 总体而言,智慧校园整体解决方案通过集成先进技术,不仅提升了校园的信息化水平,而且优化了教学和管理流程,为学生、教师和家长提供了更加便捷、个性化的教育体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值