还不知道这个插件的小伙伴可以先去官网下载,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