Available only in PRO Edition

Настройка Organogram

Размеры элементов Organogram, их расположение и содержимое, а также положение компонента относительно контейнера можно настраивать с помощью свойства type.

Общие настройки

Следующие свойства можно указать в type, после чего изменения применятся ко всему компоненту:

  • autowidth - (boolean) адаптирует размер контейнера под ширину диаграммы:
webix.ui({
    view: "organogram",
    autowidth: true,
    ...
});
  • autoheight - (boolean) адаптирует размер контейнера под высоту диаграммы:
webix.ui({
    view: "organogram",
    autoheight: true,
    ...
});

Настройка элементов диаграммы

Внешний вид элементов Organogram также можно изменять с помощью свойства type:

  • lineColor - цвет линии, соединяющей элементы диаграммы:
webix.ui({
    view: "organogram",
    type: {
        lineColor: "#90caf9"
    },
    ...
});
  • width - ширина элемента в пикселях, значение должно быть фиксированным числом:
webix.ui({
    view: "organogram",
    type:{
         width: 120 
    },
    ...
});
  • height - высота элемента, по умолчанию "auto" - адаптируется к высоте содержимого:
webix.ui({
    view: "organogram",
    type:{
       height: 100
    },
    ...
});
  • padding - пространство между Organogram и границами контейнера:
webix.ui({
    view: "organogram",
    type:{
        padding: 20
    },
    ...
});
  • marginX - горизонтальное пространство между двумя элементами:
webix.ui({
    view: "organogram",
    type:{
        marginX: 20
    },
    ...
});
  • marginY - вертикальное пространство между двумя элементами:
webix.ui({
    view: "organogram",
    type:{
        marginY: 20
    },
    ...
});
  • template - задает внутренний html для каждого элемента, по умолчанию "#value#":
{
    template: webix.template("#value#")
}

Чтобы изменить html содержимое элемента диаграммы, вы можете переопределить свойство template. Например, установить изображение для элементов:

var orgChart = new webix.ui({
    container:"testA",
    view:"organogram",
    template: function(obj){
        var image = obj.img;
 
        if(image){
            html = "<img src='"+image+"' class='photo'>";
        }
        return (image||"")+obj.value;
    }
});

Для работы с содержимым элементов вы также можете создавать свои темплейты с нужной логикой. Например, вы можете добавить символ ">" к пунктам списка внутри элементов. Чтобы символ был корректно распознан, используйте html код "&amp;gt;".

var orgChart = new webix.ui({
    container:"testA",
    view:"organogram",
    template: function(marks){
        var html = "";
        if(marks && marks.list_item){
            html = " &gt; ";
        }
            return html;
    }
});

Related sample:  Templates

Создание группированных списков

Существует возможность группировать списки внутри блоков.

Чтобы создать группированный список, задайте в родительском элементе свойство $type со значением "list".

В Organogram на изображении выше, элементы 4-го уровня представлены списками, разделенными на группы.

Например, чтобы объединить подэлементы уровня "Research" ("Base research" и "Collaborative research with industries"), нужно задать в его объекте значение "list" свойству $type.

Описанная структура в коде ниже:

var orgChart = new webix.ui({
    container:"testA",
    view:"organogram",
    data: [
        {id:"1", value:"Center Director", data:[
            { id:"1.1", value:"Research &amp; Development", data:[
                { id:"1.1.1", value:"Research", $type: "list", data:[
                    { id:"1.1.1.1", value:"Base research" },
                    { id:"1.1.1.2", value:"Collaborative research with industries" }
                ]},
                { id:"1.1.2", value:"Development", $type: "list", data:[
                    { id:"1.1.2.1", value:"Faculty development workshops" },
                    { id:"1.1.2.2", value:"Student development" }
                ]}
            ]},
            ...
        ]}
    ]
});

Related sample:  Lists

Настройка группированных списков

По умолчанию элементы списка помещаются в стандартный список HTML. Чтобы визуально разделить элементы списка и показать наследование, используйте следующие значения внутри свойства type:

  • listMarginX - пространство между вертикальной линией и элементами блока;
  • listMarginY - пространство между двумя блоками на оси.

webix.ui({
    view:"organogram",
    type:{
        listMarginX: 20,
        listMarginY: 20
    }
});

Related sample:  Lists Blocks

Добавление вложенного списка

Чтобы добавить вложенные списки, примените свойство $type:list к родительскому и наследуемому блокам.

Organogram на изображении выше содержит два подуровня на 3-м и 4-м уровнях.

В коде это выглядит следующим образом:

var orgChart = new webix.ui({
    container:"testA",
    view:"organogram",
    type:{
        marginX:40,
        listMarginX: 20,
        listMarginY: 20
    },
    data: [
        {id:"1", value:"Center Director", data:[
            { id:"1.1", value:"Research &amp; Development", $type: "list", data:[
                { id:"1.1.1", value:"Research", $type: "list", data:[
                    { id:"1.1.1.1", value:"- Base research" },
                    { id:"1.1.1.2", value:"- Collaborative research with industries"}
                ]},
                { id:"1.1.2", value:"Development", $type: "list", data:[
                    { id:"1.1.2.1", value:"- Faculty development workshops" },
                    { id:"1.1.2.2", value:"- Student development" }
                ]}
            ]},
            ...
        ]}
    ]
})

Чтобы объединить вложенные элементы уровня "Research & Development", свойство $type:list было задано в его объекте. Затем были добавлены данные вложенных списков, где также было задано свойство $type:list.

Related sample:  Nested List Blocks

Наверх
If you have not checked yet, be sure to visit site of our main product Webix lightweight js framework and page of organogram javascript product.