组织架构图实现——jOrgChart的使用

最近公司需要做一个组织架构图，具体的功能如下：

我这边是做了横向和纵向两种展示方式：

目前这个还不是最终定稿，先不管了，光做这些就花了我好几天的时间了。jq操作dom我已经忘光了。。

步骤1：百度检索，查找orgchart的实例

然后下载实例：

步骤2：实例引用

1.js/css部分的引用

<!-- 引入jq文件 -->
<script src="~/Scripts/Common/jquery-1.10.2.js"></script>
<script src="~/Scripts/Common/html2canvas.min.js"></script>
<!-- 引入jqrgchart.css -->
<link href="~/Content/css/jquery.orgchart.css" rel="stylesheet" />
<!-- 引入jqrgchart.js -->
<script src="~/Scripts/Common/jquery.orgchart.js"></script>

2.自定义style样式

<style scoped>* {margin:0;padding:0;}body {user-select: none;width:100%;height:100%;}/*css,不引用默认的布局部分*/.orgchart {background: #fff;}.orgchart td.left,.orgchart td.right,.orgchart td.top {border-color: #f1f1f1;}.orgchart td > .down {background-color: #f1f1f1;}.orgchart .middle-level .title {background-color: #006699;}.orgchart .middle-level .content {border-color: #006699;}.orgchart .product-dept .title {background-color: #009933;}.orgchart .product-dept .content {border-color: #009933;}.orgchart .rd-dept .title {background-color: #993366;}.orgchart .rd-dept .content {border-color: #993366;}.orgchart .pipeline1 .title {background-color: #996633;}.orgchart .pipeline1 .content {border-color: #996633;}.orgchart .frontend1 .title {background-color: #cc0066;}.orgchart .frontend1 .content {border-color: #cc0066;}.orgchart .node {width:110px;}.wrap {background: #fff;border-radius: 10px;box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 4px;box-sizing: border-box;position: relative;line-height: 16px;font-size: 12px;}.wrap img {width: 30px;height: 30px;border-radius: 50%;margin-bottom:4px;}.wrap .detailCls {position: absolute;right: -150px;top: 0;width: 150px;height: 150px;background: #fff;border: 4px solid #ff9900;color: #000;border-radius: 10px;z-index: 999999;display: flex;flex-direction: column;justify-content: center;line-height: 20px;padding: 6px;box-sizing: border-box;text-align: left;box-shadow:0 0 10px 6px rgba(0,0,0,.1);}#chart-container {width: 96%;margin:0 auto;height:calc(100% - 80px);overflow: auto;position:relative;top:40px;/*border:1px dashed #ccc;border-radius:10px;*/}.el-icon-user-solid {font-size:16px;margin-right:4px;}.post {font-size:12px;color:#424242;}.btngroup {width: 200px;height: 30px;line-height: 30px;display: flex;float: right;border: 1px solid #ff9900;margin-right: 20px;border-radius: 4px;font-size: 12px;position: fixed;right: 20px;top:5px;z-index: 100000;}.btngroup span {flex: 1;color: #000;text-align:center;cursor:pointer;}.btngroup span:first-child {border: 1px solid #ff9900;}.btngroup span.active {background: #ff9900;color: #fff;}.contentCls {display:flex;flex-direction:column;line-height:16px;}.h4title {text-align: center;position:fixed;z-index:100000;left:50%;transform:translateX(-50%);background:#fff;width:100%;height:40px;line-height:40px;}</style>

3.html部分代码

<div><h4 class="h4title">元器件部门组织架构图</h4><div class="btngroup"><span class="active" onclick="directionFn(this,1)">横向</span><span onclick="directionFn(this,2)">纵向</span></div><div id="chart-container"></div>
</div>

4.js部分——最重要

根据最终的效果图，实现功能：

横向纵向切换
组织架构图渲染,点击子节点可以弹窗出现详情

1.横向与纵向的切换

var currentNum = 1;
function directionFn(el, n) {if (currentNum == n) {//防止重复点击当前的状态，导致页面重复渲染相同的数据return;}currentNum = n;$("#chart-container").html("");//渲染组织架构图之前要先页面清空$(".btngroup").find("span").removeClass("active");//移除选中的样式if (n == 1) {$(".btngroup").find("span").eq(0).addClass("active");//如果选中的是横向，则横向添加active类名vm.rowRender();//渲染组织架构图} else {$(".btngroup").find("span").eq(1).addClass("active");//如果选中的是纵向，则纵向添加active类名vm.columnRender();//渲染组织架构图}
}

2.渲染组织架构图

其实用不用vue都无所谓了，因为用了jorgchart是用字符串拼接的方式来拼接dom，用的是jq的方式：

var vm = new Vue({el: "#chart-container",data() {return {datascource: [],detailObj: {}}},created() {this.getList();},methods: {filterData(id, arr) {//这个方法是根据id查找对应的详情信息的if (arr && arr.length) {for (var i = 0; i < arr.length; i++) {if (arr[i].children) {this.filterData(id, arr[i].children);}if (arr[i].Id == id) {this.detailObj = arr[i];console.log("找到了", this.detailObj);return;}}}},renderData(arr) {//这个是对数据的处理，因为有些没有头像的数据需要添加个默认值，数据对的情况下，请忽略arr && arr.forEach((a, aIndex) => {if (a.ParentId == undefined && !a.noHead) {if (a.HeadPhoto == null) {a.HeadPhoto = 'https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com//Bom/bom/2021/5/25/2021052519023103998002.png';}}if (a.User) {a.children = a.User;this.renderData(a.children);delete a.User;}})this.datascource = arr;},getList() {//通过接口获取数据$.get("/SysArea/Department/DepartmentList", res => {//数据返回var datascource1 = [{Name: res.FLevelDepart,noHead: true,User: res.DepartmentLists}];this.renderData(datascource1);if (this.datascource) {datascource2 = this.datascource[0];console.log(11,datascource2);}var dataArr = datascource2;datascourcearr = this.handleData(dataArr.children);datascource = {Name: res.FLevelDepart,noHead: true,children: datascourcearr};//注意两点：1.数据的格式一定要对，如果不对，可以跟我一样自行处理数据后进行dom的渲染2.数据的名称一定要是datascource，我有尝试修改其他名称，结果什么都没有渲染出来this.rowRender();})},//横向渲染domrowRender() {$("#chart-container").orgchart({data: datascource, //数据源nodeContent: "title",depth: 10, //默认显示的深度zoom: false, //设置是否可以缩放chartContainer: "orgcontainer", //绑定容器的class类pan: false, //是否可拖动toggleSiblingsResp: false,nodeId: "Id",//createNode部分就是你想要的自己的样式createNode: ($node, data) => {//οnclick=getOrgId(this,${val.id},${JSON.stringify(val.details)});var secondMenu = `<div class="wrap" οnclick="vm.getDetail(this,${data.Id})">`;if (data.ParentId == undefined && !data.noHead) {secondMenu += `<img src="${data.HeadPhoto}"/>`;if (data.Status) {secondMenu += `<div><span class="el-icon-user-solid" style="color:#5cb85c;"></span>${data.Name}</div>`;} else {secondMenu += `<div><span class="el-icon-user-solid" style="color:#fc5531;"></span>${data.Name}</div>`;}secondMenu += `<div class="post">${data.PostName ? data.PostName : "未知"}</div>`;} else {secondMenu += `<div>${data.Name}</div>`;}secondMenu += `</div>`;$node.html(secondMenu);},//direction: "l2r", //横向//导出图片选项//exportButton: true,//exportFilename: "MyOrgChart",});//此处添加这个body的样式，是为了隐藏纵向滚动条，$("body").css({overflow: "hidden",});},//纵向渲染domcolumnRender() {$("#chart-container").orgchart({data: datascource, //数据源nodeContent: "title",depth: 10, //默认显示的深度zoom: false, //设置是否可以缩放chartContainer: "orgcontainer", //绑定容器的class类pan: false, //是否可拖动toggleSiblingsResp: false,nodeId: "Id",direction: "l2r", //纵向createNode: ($node, data) => {//οnclick=getOrgId(this,${val.id},${JSON.stringify(val.details)});var secondMenu;if (data.ParentId == undefined && !data.noHead) {secondMenu = `<div class="wrap" οnclick="vm.getDetail(this,${data.Id})">`;} else {secondMenu = `<div class="wrap partName" οnclick="vm.getDetail(this,${data.Id})">`;}if (data.ParentId == undefined && !data.noHead) {secondMenu += `<img src="${data.HeadPhoto}"/>`;if (data.Status) {secondMenu += `<div class="contentCls"><div><span class="el-icon-user-solid" style="color:#5cb85c;"></span>${data.Name}</div>`;} else {secondMenu += `<div class="contentCls"><div><span class="el-icon-user-solid" style="color:#fc5531;"></span>${data.Name}</div>`;}secondMenu += `<div class="post">(${data.PostName ? data.PostName : "未知"})</div></div>`;} else {secondMenu += `<div>${data.Name}</div>`;}secondMenu += `</div>`;$node.html(secondMenu);}});$("body").css({overflow: "auto",});//写完横向的内容及样式后，发现改为纵向时，很多内容都是反的，因此加了css样式将内容进行反转。$(".wrap").css({transform: "rotateZ(-90deg) rotateY(180deg)",width: "140px",position: "relative",top: "40px",left: "-55px","z-index": 1,flexDirection: "row","justify-content": "flex-start"});$(".partName").css({transform: "rotateZ(-90deg) rotateY(180deg)",width: "120px",position: "relative",top: "43px",left: "-40px","justify-content": "center"});$(".wrap img").css({width: "30px",height: "30px"})},//点击子节点时，通过id获取到详情内容，然后添加dom添加到页面上。getDetail(el, id, detail) {console.log(id);console.log(detail);this.filterData(id, this.datascource);console.log(this.detailObj);var width = $(window).width();var left = $(el).offset().left;var scrollLeft = $("#chart-container").scrollLeft();if (Math.abs(left - width) < 500) {$("#chart-container").animate({scrollLeft: scrollLeft + width / 2,}, 500);} else if (Math.abs(left - width) > width - 100) {$("#chart-container").animate({scrollLeft: scrollLeft - width / 2,}, 500);}var dom = $("#chart-container").find(".detailCls");if (dom.length) {dom.remove();}var detailDom = `<div class="detailCls">`;if (this.detailObj.Id) {detailDom += ` <span>Id：${this.detailObj.Id}</span>`}detailDom += `<span>姓名：${this.detailObj.Name}</span>`if (this.detailObj.ParentId == undefined && !this.detailObj.noHead) {detailDom += `<span>职位：${this.detailObj.PostName ? this.detailObj.PostName : "未知"}</span>`;if (this.detailObj.Status == 0) {detailDom += ` <span>状态：下班</span>`} else if (this.detailObj.Status == 1) {detailDom += ` <span>状态：上班</span>`}}detailDom += `</div>`$(el).append(detailDom);}}
})

效果图更改：

由于组织架构图都是层级嵌套的，如果没有层级嵌套，会直接一行展示数据，比较丑。现在的需求就是：将横向的数据添加到每一项的children中，然后变成子级嵌套的形式，效果如上图所示：

这个肯定要用到递归，但是我不会写……

想了好久，终于被我想通了，哈哈：
代码奉上：

 recurrenceData(arr, data) {var i = 0;arr && arr.forEach(a => {if (a.children&&a.children.length) {//递归查找最后一级没有children的子级，找到就要赋值一个数据this.recurrenceData(a.children,data);} else {if (data.length > 0) {a.children = data.splice(0, 1);}}})
},
handleData(dataArr, n) {dataArr && dataArr.forEach(child => {if (child.children && child.children.length > 5) {var data = child.children.splice(5, child.children.length - 1);child.children && child.children.map(c => {if (data.length) {c.children = data.splice(0, 1);}})//如果一行超过5个，则需要转行，就是把剩余的数据放到前5项里面的children中var row = Math.ceil(data.length / 5);//具体递归函数需要执行多少次，跟行数有关，每行5个，就可以得出需要执行的行数了for (var i = 0; i < row; i++) {if (data.length) {child.children && child.children.map(c => {//这个就是递归函数this.recurrenceData(c.children, data);})}}}})return dataArr;
},

简单吧，因为我的js很菜，所以花了很久的时间，完成！！

最后附上全文代码：

@{ViewBag.Title = "组织架构";//Layout = "/Views/Shared/_LayoutListPage.cshtml";// <script src="~/Scripts/Common/WebAnalysis.js"></script><!-- 引入vue --><script src="~/Scripts/Common/vue.js"></script><!-- 引入样式 --><link href="~/Content/css/elementUi.css" rel="stylesheet" /><!-- 引入组件库 --><script src="~/Scripts/Common/element.js"></script><!-- 引入jq文件 --><script src="~/Scripts/Common/jquery-1.10.2.js"></script><script src="~/Scripts/Common/html2canvas.min.js"></script><!-- 引入jqrgchart.css -->@*<link href="~/Content/css/jquery.jOrgChart.css" rel="stylesheet" />*@<link href="~/Content/css/jquery.orgchart.css" rel="stylesheet" /><!-- 引入jqrgchart.js -->@*<script type="text/javascript" src="~/Scripts/Common/jquery.jOrgChart.js"></script>*@<script src="~/Scripts/Common/jquery.orgchart.js"></script><style scoped>* {margin:0;padding:0;}body {user-select: none;width:100%;height:100%;}/*css,不引用默认的布局部分*/.orgchart {background: #fff;}.orgchart td.left,.orgchart td.right,.orgchart td.top {border-color: #dedede;border-width:1px;}.orgchart td > .down {background-color: #dedede;border-width: 1px;}.orgchart .middle-level .title {background-color: #006699;}.orgchart .middle-level .content {border-color: #006699;}.orgchart .product-dept .title {background-color: #009933;}.orgchart .product-dept .content {border-color: #009933;}.orgchart .rd-dept .title {background-color: #993366;}.orgchart .rd-dept .content {border-color: #993366;}.orgchart .pipeline1 .title {background-color: #996633;}.orgchart .pipeline1 .content {border-color: #996633;}.orgchart .frontend1 .title {background-color: #cc0066;}.orgchart .frontend1 .content {border-color: #cc0066;}.orgchart .node {width:110px;}.wrap {background: #fff;border-radius: 10px;/*box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);*/border:1px solid #dedede;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 4px;box-sizing: border-box;position: relative;line-height: 16px;font-size: 12px;word-break: break-all;}.wrap img {width: 30px;height: 30px;border-radius: 50%;margin-bottom:4px;}.wrap .detailCls {position: absolute;right: -150px;top: 0;width: 150px;height: 150px;background: #fff;border: 4px solid #ff9900;color: #000;border-radius: 10px;z-index: 999999;display: flex;flex-direction: column;justify-content: center;line-height: 20px;padding: 6px;box-sizing: border-box;text-align: left;box-shadow:0 0 10px 6px rgba(0,0,0,.1);font-size:14px;}#chart-container {width: 96%;margin:0 auto;height:calc(100% - 80px);overflow: auto;position:relative;top:40px;/*border:1px dashed #ccc;border-radius:10px;*/}.el-icon-user-solid {font-size:16px;margin-right:4px;}.post {font-size:10px;color:#424242;}.btngroup {width: 200px;height: 30px;line-height: 30px;display: flex;float: right;border: 1px solid #ff9900;margin-right: 20px;border-radius: 4px;font-size: 12px;position: fixed;right: 20px;top:5px;z-index: 100000;}.btngroup span {flex: 1;color: #000;text-align:center;cursor:pointer;}.btngroup span:first-child {border: 1px solid #ff9900;}.btngroup span.active {background: #ff9900;color: #fff;}.contentCls {display:flex;flex-direction:column;line-height:16px;}.h4title {text-align: center;position:fixed;z-index:100000;left:50%;transform:translateX(-50%);background:#fff;width:100%;height:40px;line-height:40px;}</style>
}<div><h4 class="h4title">元器件部门组织架构图</h4><div class="btngroup"><span class="active" onclick="directionFn(this,1)">纵向</span><span onclick="directionFn(this,2)">横向</span></div><div id="chart-container"></div>
</div>
<script type="text/javascript">var currentNum = 1;var datascource = {};function directionFn(el, n) {if (currentNum == n) {return;}currentNum = n;$("#chart-container").html("");$(".btngroup").find("span").removeClass("active");if (n == 1) {$(".btngroup").find("span").eq(0).addClass("active");vm.rowRender();} else {$(".btngroup").find("span").eq(1).addClass("active");vm.columnRender();}}$(document).on('click', (e) => {console.log("点击了");var dom = $("#chart-container").find(".detailCls");if (dom.length) {dom.remove();}})function getDetail(e) {//event.stopPropagation();//如果提供了事件对象，则这是一个非IE浏览器}var vm = new Vue({el: "#chart-container",data() {return {datascource: [],detailObj: {}}},created() {this.getList();},methods: {filterData(id, name, arr) {if (arr && arr.length) {for (var i = 0; i < arr.length; i++) {if (arr[i].children) {this.filterData(id, name, arr[i].children);}if (arr[i][name] == id) {this.detailObj = arr[i];console.log("找到了", this.detailObj);return;}}}},renderData(arr) {arr && arr.forEach((a, aIndex) => {if (a.ParentId == undefined && !a.noHead) {if (a.HeadPhoto == null) {a.HeadPhoto = 'https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com//Bom/bom/2021/5/25/2021052519023103998002.png';}}if (a.User) {a.children = a.User;this.renderData(a.children);delete a.User;}})this.datascource = arr;},getList() {$.get("/SysArea/Department/DepartmentList", res => {//数据返回var datascource1 = [{Name: res.FLevelDepart,noHead: true,User: res.DepartmentLists}];this.renderData(datascource1);if (this.datascource) {datascource2 = this.datascource[0];console.log(11, datascource2);}var dataArr = datascource2;datascourcearr = this.handleData(dataArr.children);datascource = {Name: res.FLevelDepart,noHead: true,children: datascourcearr};console.log("最终数据", datascource);this.rowRender();})},recurrenceData(arr, data) {var i = 0;arr && arr.forEach(a => {if (a.children && a.children.length) {this.recurrenceData(a.children, data);} else {if (data.length > 0) {a.children = data.splice(0, 1);}}})},handleData(dataArr, n) {dataArr && dataArr.forEach(child => {if (child.children && child.children.length > 10) {var data = child.children.splice(5, child.children.length - 1);child.children && child.children.map(c => {if (data.length) {c.children = data.splice(0, 1);}})var row = Math.ceil(data.length / 5);for (var i = 0; i < row; i++) {if (data.length) {child.children && child.children.map(c => {this.recurrenceData(c.children, data);})}}} else {var len = Math.ceil(child.children.length / 2);var data = child.children.splice(len, child.children.length - 1);child.children && child.children.map(c => {if (data.length) {c.children = data.splice(0, 1);}})var row = Math.ceil(data.length / len);for (var i = 0; i < row; i++) {if (data.length) {child.children && child.children.map(c => {this.recurrenceData(c.children, data);})}}}})return dataArr;},rowRender() {$("#chart-container").orgchart({data: datascource, //数据源nodeContent: "title",depth: 10, //默认显示的深度zoom: false, //设置是否可以缩放chartContainer: "orgcontainer", //绑定容器的class类pan: false, //是否可拖动toggleSiblingsResp: false,nodeId: "Id",createNode: ($node, data) => {//οnclick=getOrgId(this,${val.id},${JSON.stringify(val.details)});//var secondMenu = `<div class="wrap" οnclick="vm.getDetail(this,${data.Id || data.UserId})">`;var secondMenu;if (data.ParentId == undefined && !data.noHead) {secondMenu = "<div class='wrap' data-userId=" + data.UserId + " data-postId=" + data.PostId + " οnclick='vm.getDetail(event)'>";secondMenu += `<img src="${data.HeadPhoto}" />`;if (data.Status == 0) {secondMenu += `<div><span class="el-icon-user-solid" style="color:#999;"></span>${data.UserName}</div>`;} else if (data.Status == 1) {secondMenu += `<div><span class="el-icon-user-solid" style="color:#5cb85c;"></span>${data.UserName}</div>`;} else {secondMenu += `<div><span class="el-icon-user-solid" style="color:#fc5531;"></span>${data.UserName}</div>`;}secondMenu += `<div class="post">${data.PostName ? data.PostName : "未知"}</div>`;} else {secondMenu = `<div class="wrap">`;secondMenu += `<div>${data.Name}</div>`;}secondMenu += "</div>";$node.html(secondMenu);},//direction: "l2r", //横向//导出图片选项//exportButton: true,//exportFilename: "MyOrgChart",});$("body").css({overflow: "hidden",});},getDetail(e) {var dom = $("#chart-container").find(".detailCls");if (dom.length) {dom.remove();}var wrap = $("#chart-container").find(".wrap");if (wrap.length) {for (var i = 0; i < wrap.length; i++) {if ($(wrap[i]).css("z-index") > 1) {$(wrap[i]).css({"z-index": 1})break;}}}if (e && e.stopPropagation) {e.stopPropagation();} else {window.event.cancelBubble = true;}var el = e.target;if (!el) {return;}if ($(el).hasClass("wrap")) {} else {el = $(el).parents(".wrap")[0];}setTimeout(() => {$(el).css({"z-index": 10001});}, 20)var PostId = el&&el.dataset.postid;var UserId = el&&el.dataset.userid;if (PostId > 7 && PostId != 9) {//(PostId != 1 && PostId != 3 && PostId != 5 && PostId != 9)return;}$.get("/SysArea/Department/GetUserKPI?userId=" + UserId + "&postId=" + Number(PostId), res => {var detailObj = res;var width = $(window).width();var left = $(el).offset().left;var scrollLeft = $("#chart-container").scrollLeft();if (Math.abs(left - width) < 500) {$("#chart-container").animate({scrollLeft: scrollLeft + width / 2,}, 500);} else if (Math.abs(left - width) > width - 100) {$("#chart-container").animate({scrollLeft: scrollLeft - width / 2,}, 500);}var dom = $("#chart-container").find(".detailCls");if (dom.length) {dom.remove();}var detailDom = `<div class="detailCls">`if (PostId == 1 || PostId == 2) {detailDom += `<span>报价数量：${detailObj.Count}</span><span>报价积分：${detailObj.Point}</span></div>`} else if (PostId == 3 || PostId == 4) {detailDom += `<span>采购数量：${detailObj.Count}</span><span>采购积分：${detailObj.Point}</span></div>`} else if (PostId == 5 || PostId == 6) {detailDom += `<span>本月开发数量：${detailObj.Count}</span></div>`} else if (PostId == 9) {detailDom += `<span>出库数：${detailObj.OutLocation}</span><span>入库数：${detailObj.InLocation}</span></div>`}$(el).append(detailDom);})},columnRender() {$("#chart-container").orgchart({data: datascource, //数据源nodeContent: "title",depth: 10, //默认显示的深度zoom: false, //设置是否可以缩放chartContainer: "orgcontainer", //绑定容器的class类pan: false, //是否可拖动toggleSiblingsResp: false,nodeId: "Id",direction: "l2r", //纵向createNode: ($node, data) => {//οnclick=getOrgId(this,${val.id},${JSON.stringify(val.details)});var secondMenu;if (data.ParentId == undefined && !data.noHead) {secondMenu = "<div class='wrap' data-userId=" + data.UserId + " data-postId=" + data.PostId + " οnclick='vm.getDetail(event)'>";/*secondMenu += `<img src="${data.HeadPhoto}" />`;*/if (data.Status == 0) {secondMenu += `<div class="nameCon"><span class="el-icon-user-solid" style="color:#999;"></span>${data.UserName}</div>`;} else if (data.Status == 1) {secondMenu += `<div class="nameCon"><span class="el-icon-user-solid" style="color:#5cb85c;"></span>${data.UserName}</div>`;} else {secondMenu += `<div class="nameCon"><span class="el-icon-user-solid" style="color:#fc5531;"></span>${data.UserName}</div>`;}secondMenu += `<div class="post">(${data.PostName ? data.PostName : "未知"})</div></div>`;} else {secondMenu = `<div class="wrap partName">`;secondMenu += `<div>${data.Name}</div>`;}secondMenu += "</div>";$node.html(secondMenu);}});$("body").css({overflow: "auto",});$(".post").css({"margin-left": "6px",color: "#000","font-size": "12px"});$(".nameCon").css({"font-size": "14px",overflow: "hidden",height: "40px","line-height": "40px"});$(".wrap").css({transform: "rotateZ(-90deg) rotateY(180deg)",width: "160px",height: "40px",position: "relative",top: "40px",left: "-60px","z-index": 1,flexDirection: "row","font-size":"13px","justify-content": "flex-start"});$(".partName").css({transform: "rotateZ(-90deg) rotateY(180deg)",width: "120px",position: "relative",top: "43px",left: "-40px","justify-content": "center"});$(".wrap img").css({width: "30px",height: "30px"})}}})
</script>

组织架构图实现——jOrgChart的使用相关推荐

组织架构图怎么画？思维导图创作教程分享
组织架构图就是把组织分成若干部分,通过组织结构图,我们可以看出各部门之间的从属关系,也能让大家清楚了解自己的岗位.工作,使得组织的协调性更加明显,绘制一份专业明了的组织架构图其实很简单,学会以下几个步 ...
OrgChart组织架构图控件
利用OrgChart组织架构图控件欢迎加入公众号进行互动:
使用Echars实现水滴状、环形图、分割图、堆叠、组织架构图、地图轮廓等图表
百度Echarts 水滴状图表横向柱形图分割块柱形图曲线面积图横向堆叠柱形图环形进度图饼状图饼状图多个标题组织架构图省市轮廓地图新疆省地图全国地图折线图阴影效果柱形折线混合图 ...
html组织架构插件,jQuery组织架构图插件okrTree.js
插件描述:jQuery组织架构图支持拖拽节点,支持插入标记节点,分支节点更新时间:2021-03-02 23:52:07 更新说明: 1. 修改默认主题, 2. 添加自定义主题接口var s = $ ...
好看的动态组织架构图的实现（JavaScript InfoVis Toolkit）
http://philogb.github.io/jit/ 插件下载地址,地址里面可找到英文api, http://philogb.github.io/jit/static/v20/Docs/fil ...
写一个组织架构图组件来深入认识vue函数式高阶组件
本文涉及到的知识点: Vue函数式组件递归函数深拷贝对象正则匹配近期在开发一个vue组织架构图组件时,为了实现高性能渲染和一些特殊用法,使用了函数式组件,要实现的效果是这样: 写一个组织架构图 ...
html5控件结构图,OrgChart组织架构图控件
插件描述:jQuery OrgChart 是一个用来绘制组织结构图的 jQuery 插件. 可以自己定加载自己想要的组织架构,通过json的形式该插件为画组织架构图插件,通过OrgChart API ...
前端关系图谱插件_js前端使用jOrgChart插件实现组织架构图的展示
一.说明 (1)通过后台查询数据库,生成树形数组结构,返回到前台. (2)需要引入的js插件和css文件: ①jquery.jOrgChart.css ②jquery.min.js ③jquery.j ...
extjs实现组织架构图_如何画好一张架构图？（内含知识图谱）
什么是架构图? 如何画好一张架构图,要做好这件事情首先要回答的就是什么是架构图.我们日常工作中经常能看到各种各样的架构图,而且经常会发现大家对架构图的理解各有侧重.深入追究到这个问题,可能一下子还很难 ...