做网站与数据库的关系,wordpress主题 academy 模版免费下载,企业网站登录,4435建站OrgChart.js是什么#xff1f;
基于ES6的组织结构图插件。
特征
支持本地数据和远程数据#xff08;JSON#xff09;。
基于CSS3过渡的平滑扩展/折叠效果。
将图表对齐为4个方向。
允许用户通过拖放节点更改组织结构。
允许用户动态编辑组织图并将最终层次结构保存为…OrgChart.js是什么
基于ES6的组织结构图插件。
特征
支持本地数据和远程数据JSON。
基于CSS3过渡的平滑扩展/折叠效果。
将图表对齐为4个方向。
允许用户通过拖放节点更改组织结构。
允许用户动态编辑组织图并将最终层次结构保存为JSON对象。
支持将图表导出为图片。
支持平移和缩放
用户可以采用多种解决方案来构建庞大的组织结构图请参考多层或混合布局部分
支持触摸的移动设备插件
使用 link relstylesheet href../css/jquery.orgchart.cssscript typetext/javascript src../js/jquery.orgchart.js/script下载地址GitHub - dabeng/OrgChart: Its a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.案例
1.本地直接生成
hrml代码 div idchart-container/div
js代码 (function($){$(function() {var datascource {name: Lao Lao,title: general manager,children: [{ name: Bo Miao, title: department manager },{ name: Su Miao, title: department manager,children: [{ name: Tie Hua, title: senior engineer },{ name: Hei Hei, title: senior engineer,children: [{ name: Pang Pang, title: engineer },{ name: Xiang Xiang, title: UE engineer }]}]},{ name: Yu Jie, title: department manager },{ name: Yu Li, title: department manager },{ name: Hong Miao, title: department manager },{ name: Yu Wei, title: department manager },{ name: Chun Miao, title: department manager },{ name: Yu Tie, title: department manager }]};$(#chart-container).orgchart({data : datascource, //数据nodeContent: title //内容对应的字段});});
})(jQuery)效果如下 选项 名称类型必需默认描述datajson or stringyes数据源用于构建组织结构图。 它可以是json对象或包含ajax请求发送到的URL的字符串。panbooleannofalse如果用户启用此选项则用户可以通过鼠标拖放来平移组织结构图。zoombooleannofalse如果用户启用此选项用户可以通过鼠标滚轮缩放/缩小组织结构图。zoominLimitnumberno7允许用户设置放大限制。zoomoutLimitnumberno0.5允许用户设置缩小限制。directionstringnot2b可用值是t2b暗示“从上到下”它是默认值b2t暗示“从下到上”l2r暗示“从左到右”r2l暗示“从右到左”。verticalLevelinteger(2)no用户可以使用此选项从指定级别垂直对齐节点。toggleSiblingsRespbooleannofalse启用此选项后用户可以通过单击左/右箭头分别显示/隐藏左/右兄弟节点。nodeTitlestringnoname它将datasource的一个属性设置为orgchart节点的title部分的文本内容。 实际上用户可以创建一个只有nodeTitle选项的简单orghcart。nodeIdstringnoid它将datasource的一个属性设置为每个orgchart节点的唯一标识符。parentNodeSymbolstringnofa-users 使用font awesome图标表示该节点具有子节点。ajaxURLjsonno它包括四个特性 父母孩子兄弟姐妹家庭要求父节点和兄弟节点。 顾名思义不同的propety提供了发送不同节点的ajax请求的URL。nodeContentstringno它将数据源的一个属性设置为orgchart节点的内容部分的文本内容。nodeTemplatefunctionno它是一个模板生成函数用于定制任何复杂的节点内部结构。 它只收到一个参数“data”代表json datasoure它将用于渲染一个节点。createNodefunctionno它是一个用于自定义每个orgchart节点的回调函数。 它收到两个参数“$node”代表单节点div的jquery对象; “data”代表单个节点的数据源。exportButtonbooleannofalse它启用了orgchart的导出按钮。exportFilenamestringnoOrgchart将当前组织图导出为图片时它是文件名。visibleLevelpositiveintegerno它表示在最开始的orgchart扩展到的级别。exportFileextensionstringnopng可用值为png和pdf。chartClassstringno当您想在一个页面上实例化多个组织结构图时您应该为它们添加不同的类名以区分它们。draggablebooleannofalse如果用户启用此选项则可以拖放orgchart的节点。 注意由于对HTML5拖放API的支持不足此功能在IE上不起作用。dropCriteriafunctionno用户可以构建自己的标准来限制拖动节点和放置区域之间的关系。 此外此函数接受三个参数draggedNodedragZonedropZone只返回boolen值。initCompletedfunctionno了解表的完全初始化数据加载和呈现的时间通常很有用尤其是在使用ajax数据源时。 它收到了一个参数“$chart”代表初始化图表的jquery对象。
方法 在制定容器加入组织架构图var oc $container.orgchart(options);
组织架构图初始化和重载init(newOptions)
为当前组织架构图添加父节点:.addParentrootdata -root:dom节点,默认指向根节点用于覆盖出事选项 -data:json对象用于构建根节点的数据源
为指定节点添加兄弟节点:.addSiblingsnodedata -node:dome节点基于此节点添加兄弟节点 -data:用于构建兄弟节点的数据源
为制定节点添加子节点.addChildrennodedata -node:dome节点基于此节点添加子节点 -data:用于构建子节点的数据源
删除指定节点.removeNodesnode -node:dome节点要删除的
获取orgchart的层次结构关系,例如在编辑组织结构图之后您可以将此方法的返回值发送到服务器端并保存orghcart的新状态。.getHierarchy
以编程方式隐藏任何特定节点.node元素的子节点##### .hideChildrennode
以编程方式显示任何特定节点.node元素的子节点.showChildrennode
以编程方式隐藏任何特定节点.node元素的兄弟节点.hideSiblingsnodedirection
以编程方式显示任何特定节点.node元素的兄弟节点.showSiblingsnodedirection
此方法返回相关节点的显示状态.getNodeStatenoderelation
返回与指定节点相关的节点getRelatedNodes($node, relation)
用于放大缩小图表setChartScale($chart, newScale)
许您将当前组织结构导出为png或pdf文件export(exportFilename, exportFileextension) 作者她的昵称w 链接https://www.jianshu.com/p/094c2256c5ed 来源简书 著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。
