orgChart的应用

文档地址：https://balkangraph.com/OrgChartJS/Demos/FirstLook
效果

html:

<div id="tree" style="height: 500px;width: 100%;"></div>

<script src="__TMPL__/public/assets/js/orgchart.js"></script>
<script>window.onload = function () {OrgChart.templates.company = Object.assign({}, OrgChart.templates.ana);OrgChart.templates.company.size = [280, 90];OrgChart.templates.company.node ='<rect x="0" y="0" rx="10" ry="10" fill="#f04848"  width="280" height="90" stroke-width="1" stroke="#f04848"></rect>'OrgChart.templates.company.field_0 = '<text text-overflow="multiline" style="font-size: 16px;font-weight:600" fill="#fff" x="140" y="70" text-anchor="middle">{val}</text>';OrgChart.templates.company.img_0 ='<clipPath id="ulaImg">'+ '<circle cx="140" cy="35" r="30"></circle>'+ '</clipPath>'+ '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#ulaImg)" xlink:href="{val}" x="115" y="5" width="40" height="40">'+ '</image>';OrgChart.templates.company.plus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.company.minus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.company.expandCollapseSize = 15;OrgChart.templates.department = Object.assign({}, OrgChart.templates.ana);OrgChart.templates.department.size = [120, 55];OrgChart.templates.department.node ='<rect x="0" y="0" rx="6" rx="6" width="120" height="55" fill="#ffa13d" stroke-width="1" stroke="#ff993f"></rect>';OrgChart.templates.department.ripple = {radius: 40,color: "#0890D3",rect: null};OrgChart.templates.department.plus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.department.minus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.department.expandCollapseSize = 15;OrgChart.templates.department.field_0 = '<text style="font-size: 14px;" width="50" text-overflow="multiline" fill="#fff" x="60" y="20" text-anchor="middle">{val}</text>';OrgChart.templates.staff = Object.assign({}, OrgChart.templates.ana);OrgChart.templates.staff.size = [26, 150];OrgChart.templates.staff.node ='<rect x="0" y="0" width="26" rx="5" ry="5" height="150" fill="#ff7734" stroke-width="1" stroke="#ff7734"></rect>';OrgChart.templates.staff.field_0 = '<text text-overflow="multiline" width="18" style="font-size: 14px;" fill="#fff" x="12.5" y="20" text-anchor="middle">{val}</text>';OrgChart.templates.staff.plus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.staff.minus ='<rect x="0" y="0" width="18" height="18" rx="9" ry="9" fill="#fff" stroke="#ff993f" stroke-width="1"></rect>'+ '<line x1="4" y1="9" x2="14" y2="9" stroke-width="1" stroke="#ff993f"></line>'OrgChart.templates.staff.expandCollapseSize = 15;var chart = new OrgChart(document.getElementById("tree"), {nodeMouseClick: OrgChart.action.none,nodeBinding: {field_0: "name",img_0: 'img'},//列表格式layout: OrgChart.treeRightOffset,//自定义节点样式tags: {"Company": {template: "company"},"Department": {template: "department"},"Staff": {template: "staff"}},nodes: {$arr}});chart.on('click', function (sender, args) {if (args.node.tags == 'Company') {window.location.href = "{:url('home/organization/branch')}?orgid=" + args.node.id + "&type=" + args.node.tags;}if (args.node.tags == 'Department') {window.location.href = "{:url('home/organization/branch')}?orgid=" + args.node.id;}if (args.node.tags == 'Staff') {window.location.href = "{:url('home/organization/group')}?orgid=" + args.node.pid + "&groupid=" + args.node.id;}});};
</script>

orgChart的应用相关推荐

OrgChart 组织架构与PHP结合使用
一.OrgChart下载地址: https://github.com/dabeng/OrgChart 二.组织架构的表设计 CREATE TABLE `org_info` ( `id` int(11) ...
orgchart php,最需要的时候遇见你OrgChart
聊聊OrgChart 使用,优雅的方式为你展现舒服的组织架构图, 前言闲来无事写一个多级用户关系层,于是就存在展示的问题.这时OrgChart就派上了用场. 在用的过程中,有一耐耐的小问题,咔咔就借 ...
OrgChart组织架构图控件
利用OrgChart组织架构图控件欢迎加入公众号进行互动:
orgchart实现组织结构图
之前项目需要我搞一个组织架构图,用大约一周时间挑选了框架并开发,最后用orgchart搞出来了,先上结果图 orgchart下载地址 :https://github.com/dabeng/OrgCha ...
jquery组织结构图插件（基于jit-yc 做可拖动、自适应伸缩的orgchart)
一个基于jquery jit-yc插件实现的orgchart结构图demo 首先后台处理转入JSON数据是必须的, var json = {"id": 1,"name& ...
vue拓扑图、组织结构图插件使用(orgChart.js)
今天使用orgChart没有找到合适的,所以今天来写篇使用文档. OrgChart.js是什么? 基于ES6的组织结构图插件. 特征支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/ ...
orgchart组织机构图
官网地址:https://github.com/dabeng/OrgChart <html> <head><link href="jquery.orgchart ...
JQuery OrgChart
Query OrgChart 是一个jQuery插件能够让帮你将一组嵌套的元素渲染成一个易于阅读的树形结构.易于使用. 你可以一个特定的树节来展示和隐藏一个树分支.可以采用CSS进行风格修改.还可以拖 ...
使用jquery.orgchart实现栏目树的配置与展示
1.首先引入需要的js和css文件,必需的为:jquery-1.8.3.min.js,jquery.orgchart.js 2.在html树中,定义id值为chart-container的节点 < ...
react中使用orgchart组织结构插件
一.使用前的准备 $ npm install jquery $ npm install expose-loader $ npm install orgchart $ npm install font- ...

orgChart的应用

orgChart的应用相关推荐

最新文章

热门文章