OrgChart.js是什么?
基于ES6的组织结构图插件。
特征
支持本地数据和远程数据(JSON)。
基于CSS3过渡的平滑扩展/折叠效果。
将图表对齐为4个方向。
允许用户通过拖放节点更改组织结构。
允许用户动态编辑组织图并将最终层次结构保存为JSON对象。
支持将图表导出为图片。
支持平移和缩放
用户可以采用多种解决方案来构建庞大的组织结构图(请参考多层或混合布局部分)
支持触摸的移动设备插件
使用
下载地址
https://github.com/dabeng/OrgChart
css:
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/jquery.orgchart.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="style.css">
html:
<div id="chart-container"></div>
<div id="edit-panel" class="view-state">
<span id="chart-state-panel" class="radio-panel">
<input type="radio" name="chart-state" id="rd-view" value="view" checked="true"><label for="rd-view">View</label>
<input type="radio" name="chart-state" id="rd-edit" value="edit"><label for="rd-edit">Edit</label>
</span>
<label class="selected-node-group">selected node:</label>
<input type="text" id="selected-node" class="selected-node-group">
<label>new node:</label>
<ul id="new-nodelist">
<li><input type="text" class="new-node"></li>
</ul>
<i class="fa fa-plus-circle btn-inputs" id="btn-add-input"></i>
<i class="fa fa-minus-circle btn-inputs" id="btn-remove-input"></i>
<span id="node-type-panel" class="radio-panel">
<input type="radio" name="node-type" id="rd-parent" value="parent"><label for="rd-parent">Parent(root)</label>
<input type="radio" name="node-type" id="rd-child" value="children"><label for="rd-child">Child</label>
<input type="radio" name="node-type" id="rd-sibling" value="siblings"><label for="rd-sibling">Sibling</label>
</span>
<button type="button" id="btn-add-nodes">Add</button>
<button type="button" id="btn-delete-nodes">Delete</button>
<button type="button" id="btn-reset">Reset</button>
</div>
js:
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/html2canvas.min.js"></script>
<script type="text/javascript" src="../js/jquery.orgchart.js"></script>
<script type="text/javascript" src="scripts.js"></script>
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数据源时