Organigramm klickbar
This commit is contained in:
parent
1073e9d8a9
commit
fbb71e556d
|
|
@ -11,7 +11,7 @@
|
|||
<script type="text/javascript">
|
||||
|
||||
var data = [
|
||||
{ 'id': 'parent', 'role': "", 'name': 'Agentur {{request.user.profile.agency.name}}', 'color': '#71AF17', "imageUrl": "{{ request.user.profile.agency.agencypic.url }}"},
|
||||
{ 'id': 'parent', 'role': "", 'name': 'Agentur {{request.user.profile.agency.name}}', 'color': '#71AF17', "imageUrl": ""},
|
||||
{% for u in agencyuser %}
|
||||
{% if u.profile.parent == u %}
|
||||
{ 'id': '{{u.pk}}' , 'name': "{{u.first_name}} {{u.last_name}}",'role': '{{u.profile.get_func_display}}\n{{u.profile.compfunc}}', 'manager': 'parent', 'color': '#1859B7', "imageUrl": "{{u.profile.image.url}}", 'userid' : '{{u.pk}}' },
|
||||
|
|
@ -24,8 +24,8 @@ var data = [
|
|||
var items = new ej.data.DataManager(data);
|
||||
|
||||
var diagram = new ej.diagrams.Diagram({
|
||||
width: "1400px", height: "800px",
|
||||
tool: ej.diagrams.DiagramTools.ZoomPan,
|
||||
width: "1000px", height: "600px",
|
||||
/*tool: ej.diagrams.DiagramTools.ZoomPan,*/
|
||||
dataSourceSettings: {
|
||||
// set the unique field from data source
|
||||
id: 'id',
|
||||
|
|
@ -45,6 +45,24 @@ var diagram = new ej.diagrams.Diagram({
|
|||
});
|
||||
diagram.appendTo('#diagram');
|
||||
|
||||
diagram.selectionChange = goToUser
|
||||
|
||||
function goToUser(){
|
||||
if(diagram.selectedItems['nodes'][0] != undefined){
|
||||
selected_id = diagram.selectedItems['nodes'][0]['properties']['data']['id'];
|
||||
if(selected_id != 'parent'){
|
||||
$("#diagram").hide();
|
||||
window.location.href = "/orga/single/"+selected_id;
|
||||
}
|
||||
else{
|
||||
$("#diagram").hide();
|
||||
window.location.href = "/orga/";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//Define the common settings for connectors.
|
||||
function connectorDefaults(connector) {
|
||||
connector.targetDecorator.shape = 'None';
|
||||
|
|
@ -82,18 +100,37 @@ function setNodeTemplate(obj, diagram) {
|
|||
innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };
|
||||
innerStack.id = obj.id + '_innerstack';
|
||||
|
||||
// create the text element to map the name data from the data source
|
||||
if(obj['properties']['data']['id'] == 'parent'){
|
||||
var text = new ej.diagrams.TextElement();
|
||||
text.style.bold = true;
|
||||
text.style.fontSize = 24;
|
||||
text.id = obj.id + '_name';
|
||||
text.content = obj.data.name;
|
||||
}
|
||||
else{
|
||||
var text = new ej.diagrams.TextElement();
|
||||
text.style.bold = true;
|
||||
text.style.fontSize = 18;
|
||||
text.id = obj.id + '_name';
|
||||
text.content = obj.data.name;
|
||||
}
|
||||
|
||||
// create the text element to map the role data from the data source
|
||||
// create the text element to map the name data from the data source
|
||||
|
||||
if(obj['properties']['data']['id'] == 'parent'){
|
||||
var desigText = new ej.diagrams.TextElement();
|
||||
desigText.id = obj.id + '_desig';
|
||||
desigText.style.fontSize = 0;
|
||||
desigText.content = obj.data.role;
|
||||
}
|
||||
else{
|
||||
var desigText = new ej.diagrams.TextElement();
|
||||
desigText.id = obj.id + '_desig';
|
||||
desigText.style.fontSize = 16;
|
||||
desigText.content = obj.data.role;
|
||||
}
|
||||
// create the text element to map the role data from the data source
|
||||
|
||||
|
||||
// append the text elements
|
||||
innerStack.children = [text, desigText];
|
||||
|
|
@ -103,7 +140,7 @@ function setNodeTemplate(obj, diagram) {
|
|||
|
||||
return content;
|
||||
}
|
||||
|
||||
/*
|
||||
$(document).ready(function(){
|
||||
|
||||
|
||||
|
|
@ -121,5 +158,6 @@ $(document).ready(function(){
|
|||
function clickme(id){
|
||||
console.log(id);
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
{% endblock content %}
|
||||
Loading…
Reference in New Issue