如何使用jquery创建基于级别的组织结构图？ [英] How to create level based organisation chart using jquery ?
本文介绍了如何使用jquery创建基于级别的组织结构图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
1.管理员与员工关系工作正常
主要问题是基于等级的
我正在使用这些文件orgchart.js和orgchart.css文件。
我想要基于水平的图表。
第一级到第7级，比如
https://github.com/dabeng/OrgChart.js [ ^ ]
以上仅链接经理与员工关系
我希望基于级别的经理对员工和级别。
请尽快提供基于级别的组织结构图。
我尝试过：
https://github.com/dabeng/OrgChart.js
============= ===============================
1.Manager to Employee Relation is working fine
Main issue is Level based like
I am using these files orgchart.js and orgchart.css file.
I want to level based chart.
first level-1 to Level-7 th level like
https://github.com/dabeng/OrgChart.js[^]
Above link only Manager to Employee Relation
and i want to Level based manager to employee and levels.
Please provide level based org chart asap.
What I have tried:
https://github.com/dabeng/OrgChart.js
============================================
function GetChildrens(data, name, level) {
//debugger;
var aaa = [];
$.each(data, function (i, j) {
//if (level == j['Level']) {
if (name == j['ReportingManager']) {
var datascource = {
'name': j['Name'],
'ReportingManager': j['ReportingManager'],
'title': j['Designation'],
'fname': j['EmployeeId'],
'imgpath': j['IMGAEPATH'],
'Level': j['Level'],
'children': GetChildrens(data, j['EmployeeId']),
}
aaa.push(datascource);
}
//}
});
return aaa;
//console.log(aaa);
}
var _Org = [];
$(document).ready(function () {
//debugger;
$.ajax({
url: localStorage.API + "/api/Login/PostGetorgchart",
method: 'POST',
dataType: 'json',
data: {
USER_ID: 0
},
success: function (Jdata) {
// debugger;
var obj = ''; _Org = []; _Org = Jdata[0];
$.each(Jdata[0], function (i, j) {
if (j['ReportingManager'] == '' || j['ReportingManager'] == '0') {
obj = j;
}
});
var datascource = {
'fname': obj['EmployeeId'],
'name': obj['Name'],
'title': obj['Designation'],
'imgpath': obj['IMGAEPATH'],
'Level': obj['Level'],
'ReportingManager': obj['ReportingManager'],
'children': GetChildrens(Jdata[0], obj['EmployeeId'], obj['Level']),
}
$(function () {
$('#chart-container').html('');
var oc = $('#chart-container').orgchart({
'data': datascource,
'depth': 2,
'nodeContent': 'title',
'exportButton': true,
'exportFilename': 'MyOrgChart',
//'direction': 'r2l',
//'direction': 'l2r',
//'direction': 'b2t',
//imgae
'nodeID': 'id',
'createNode': function ($node, data) {
var secondMenuIcon = $('<i style="display:none;">', { //<i>
'class': 'fa fa-info-circle second-menu-icon',
click: function () {
$(this).siblings('.second-menu').toggle();
}
});
//style="display: none;" fa fa-info-circle second-menu-icon
//var secondMenu = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + data.fname + '.jpg"></div>';
//var secondMenu = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + data.imgpath + '"></div>';
var imgpath1 = window.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') - 5) + "/img/employee/" + data.imgpath + "";
var imgdefault1 = window.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') - 5) + "/img/employee/DEFAULT.jpg";
$.ajax({
url: imgpath1,
//type: "HEAD",
crossDomain: true,
success: function () {
//debugger;
//var secondMenu = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + data.imgpath + '"></div>';
var secondMenu = '<div class="second-menu" style="background-image:url(' + imgpath1 + ')"></div>';
$node.append(secondMenuIcon).append(secondMenu);
},
error: function () {
//var secondMenu1 = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + "DEFAULT.jpg" + '"></div>';
var secondMenu1 = '<div class="second-menu"style="background-image:url(' + imgdefault1 + ')"></div>'
$node.append(secondMenuIcon).append(secondMenu1);
},
});
//$node.append(secondMenuIcon).append(secondMenu);
}
// level based
//addChildren: function ($node, data) {
// this.buildChildNode($node.closest('table'), data);
// if (!$node.children('.bottomEdge').length) {
// $node.append('<i class="edge verticalEdge bottomEdge fa"></i>');
// }
// if (!$node.find('.symbol').length) {
// $node.children('.title').prepend('<i class="fa ' + this.options.parentNodeSymbol + ' symbol"></i>');
// }
// if (this.isInAction($node)) {
// this.switchVerticalArrow($node.children('.bottomEdge'));
// }
//},
//// build the parent node of specific node
//buildParentNode: function ($currentRoot, data) {
// debugger;
// data.relationship = data.relationship || '001';
// var $table = $('<table>')
// .append($('<tr>').append($('<td colspan="2">').append(this.createNode(data))))
// .append('<tr class="lines"><td colspan="2"><div class="downLine"></div></td></tr>')
// .append('<tr class="lines"><td class="rightLine"></td><td class="leftLine"></td></tr>');
// this.$chart.prepend($table)
// .children('table:first').append('<tr class="nodes"><td colspan="2"></td></tr>')
// .children('tr:last').children().append(this.$chart.children('table').last());
//},
//level b
});
// Remove style start
// $("#chart-container").removeAttr("style")
$('#chart-container').css('overflow', 'auto!important');
$('.orgchart').css('overflow', 'auto!important');
//$('.orgchart').css('display', 'block!important');
});
}
});
});
推荐答案
.each（data，函数（i，j）{
// if（level == j ['Level']）{
if （name == j ['' ReportingManager']）{
var datascource = {
' name'：j [' 名称']，
' ReportingManager'： j [' ReportingManager']，
' title'：j [' 名称']，
' fname'：j [' EmployeeId']，
' imgpath'：j [' IMGAEPATH']，
' 级别：j [' 级别']，
< span class =code-string>' children'：GetChildrens（data，j [' EmployeeId']），
}
aaa.push（datascource）;
}
// }
}）;
return aaa;
// console.log（aaa）;
}
var _Org = [];
.each(data, function (i, j) { //if (level == j['Level']) { if (name == j['ReportingManager']) { var datascource = { 'name': j['Name'], 'ReportingManager': j['ReportingManager'], 'title': j['Designation'], 'fname': j['EmployeeId'], 'imgpath': j['IMGAEPATH'], 'Level': j['Level'], 'children': GetChildrens(data, j['EmployeeId']), } aaa.push(datascource); } //} }); return aaa; //console.log(aaa); } var _Org = [];
（ document ）。ready（ function （）{
// 调试器;
(document).ready(function () { //debugger;
.ajax（{
url：localStorage.API + < span class =code-string> / api / Login / PostGetorgchart，
method：' POST'，
dataType：' json'，
数据：{
USER_ID： 0
}，
成功： function （Jdata）{
// 调试器;
var obj = ' '; _Org = []; _Org = Jdata [ 0 ];
.ajax({ url: localStorage.API + "/api/Login/PostGetorgchart", method: 'POST', dataType: 'json', data: { USER_ID: 0 }, success: function (Jdata) { // debugger; var obj = ''; _Org = []; _Org = Jdata[0];
这篇关于如何使用jquery创建基于级别的组织结构图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
