# С версии 1.0.2 пользователи могут установить orgchart и добавить его в зависимости bower.json
$ bower install orgchart

# С версии 1.0.4 пользователи могут установить orgchart с помощью npm
$ npm install orgchart

var oc = $('#chartContainerId').orgchart(options);

{
  'id': 'rootNode', // Необязательное свойство. В будущем плагины будут использовать его для создания идентификаторов узлов, свойства data-parent (идентификатор родительского узла) и т. д.
  'collapsed': true, // Необязательное свойство. По умолчанию при инициализации текущий узел находится в свернутом состоянии, и его дочерние узлы не отображаются.
  'className': 'top-level', // Необязательное свойство. В будущем компоненты будут добавлять это значение к CSS-классам узлов.
  'nodeTitle': 'name', // Необязательное свойство. Плагины будут использовать это свойство для поиска данных источника и отображения верхней части узла по умолчанию.
  'nodeContent': 'title', // Необязательное свойство. Плагины будут использовать это свойство для поиска данных источника и отображения нижней части узла по умолчанию.
  'relationship': relationshipValue, // Внимание: когда вы активируете функцию загрузки узлов по требованию, вы должны использовать JSON-источник данных (локальный или удаленный) и установить это свойство. Значение relationshipValue представляет собой строку длиной 3 символа, состоящую из "0" или "1", где:
  // 1-й символ указывает, имеет ли текущий узел родительский узел.
  // 2-й символ указывает, имеет ли текущий узел братские узлы.
  // 3-й символ указывает, имеет ли текущий узел дочерние узлы.
}
```  'children': [ // Это свойство представляет собой вложенные узлы.
     { 'name': 'Bo Miao', 'title': 'директор отдела', 'relationship': '110' },
     { 'name': 'Su Miao', 'title': 'директор отдела', 'relationship': '111',
       'children': [
         { 'name': 'Tie Hua', 'title': 'старший инженер', 'relationship': '110' },
         { 'name': 'Hei Hei', 'title': 'старший инженер', 'relationship': '110' }
       ]
     },
     { 'name': 'Yu Jie', 'title': 'директор отдела', 'relationship': '110' }
   ],
   'otherPro': anyValue // В источнике данных можно добавить любые другие поля, если вы считаете, что они могут быть полезны при последующем рендеринге и манипуляциях с организационной структурой.
 };
 
 ### Параметры
  <table>
    <thead>
      <tr>
        <th>Название</th>
        <th>Тип</th>
        <th>Обязательный</th>
        <th>Значение по умолчанию</th>
        <th>Описание</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data</td>
        <td>json / jquery object</td>
        <td>Да</td>
        <td></td>
        <td>Источник данных для построения организационной структуры. Значение может быть JSON или ul элемент, предоставляющий данные.</td>
      </tr>
      <tr>
        <td>pan</td>
        <td>boolean</td>
        <td>Нет</td>
        <td>false</td>
        <td>Включение этого параметра позволяет пользователю перетаскивать организационную структуру с помощью мыши.</td>
      </tr>
      <tr>
        <td>zoom</td>
        <td>boolean</td>
        <td>Нет</td>
        <td>false</td>
        <td>Включение этого параметра позволяет пользователю масштабировать организационную структуру с помощью колеса мыши или сенсорной панели.</td>
      </tr>
      <tr>
        <td>zoominLimit</td>
        <td>number</td>
        <td>Нет</td>
        <td>7</td>
        <td>Ограничение масштабирования вниз.</td>
      </tr>
    </tbody>
  </table>       <td>Максимальное значение увеличения масштаба.</td>
      </tr>
      <tr>
        <td>zoomoutLimit</td>
        <td>number</td>
        <td>Нет</td>
        <td>0.5</td>
        <td>Минимальное значение уменьшения масштаба.</td>
      </tr>
      <tr>
        <td>direction</td>
        <td>string</td>
        <td>Нет</td>
        <td>"t2b"</td>
        <td>Этот параметр задает направление размещения элементов. "t2b" означает от верхнего к нижнему, что является значением по умолчанию. "b2t" означает от нижнего к верхнему. "l2r" означает от левого к правому. "r2l" означает от правого к левому.</td>
      </tr>
      <tr>
        <td>verticalLevel</td>
        <td>integer(>=2)</td>
        <td>Нет</td>
        <td></td>
        <td>Указывает уровень, с которого организационная структура начинает переход от горизонтального расположения узлов к вертикальному.</td>
      </tr>
      <tr>
        <td>toggleSiblingsResp</td>
        <td>boolean</td>
        <td>Нет</td>
        <td>false</td>
        <td>Включение этого параметра позволяет пользователю разворачивать/скрывать только ближайших соседей узла при нажатии на кнопки раскрытия/скрытия; по умолчанию при нажатии на любую из кнопок раскрытия/скрытия скрываются все соседние узлы, не учитывая их положение слева или справа.</td>
      </tr>
      <tr>
        <td>visibleLevel</td>
        <td>positive integer</td>
        <td>Нет</td>
        <td>999</td>
        <td>Этот параметр задает количество уровней, которые будут видны при инициализации организационной структуры.</td>
      </tr>
      <tr>
        <td>nodeTitle</td>
        <td>string</td>
        <td>Нет</td>
        <td>"name"</td>
  </tr>       <td>Связывает заголовок узла по умолчанию с атрибутом данных источника.</td>
      </tr>
      <tr>
        <td>parentNodeSymbol</td>
       <td>string</td>
        <td>нет</td>
        <td>"oci-leader"</td>
        <td>Устанавливает CSS-класс для иконки всех родительских узлов</td>
      </tr>
      <tr>
        <td>nodeContent</td>
        <td>string</td>
        <td>нет</td>
        <td></td>
        <td>Связывает часть содержимого узла по умолчанию с атрибутом данных источника</td>
      </tr>
      <tr>
        <td>nodeId</td>
        <td>string</td>
        <td>нет</td>
        <td>"id"</td>
        <td>Выбирает поле данных источника в качестве уникального идентификатора для каждого узла в структуре</td>
      </tr>
      <tr>
        <td>nodeTemplate</td>
        <td>function</td>
        <td>нет</td>
        <td></td>
        <td>Должен предоставить функцию для создания шаблона узла, которая принимает только один параметр — фрагмент данных источника, содержащий поддерево для отрисовки.</td>
      </tr>
      <tr>
        <td>createNode</td>
        <td>function</td>
        <td>нет</td>
        <td></td>
        <td>Функция, которая будет вызвана после создания узла по умолчанию. Использует два переданных параметра — "$node" и "data", чтобы помочь разработчику настроить или изменить текущую структуру узлов.</td>
      </tr>
      <tr>
        <td>exportButton</td>
        <td>boolean</td>
        <td>нет</td>
        <td>false</td>
        <td>Активация этого параметра добавляет кнопку "Экспорт" в контейнер DIV структуры.</td>
      </tr>
      <tr>
        <td>exportButtonName</td>
        <td>string</td>
        <td>нет</td>
        <td>"Export"</td>
        <td>Имя кнопки экспорта.</td>
      </tr>
      <tr>
        <td>exportFilename</td>
        <td>string</td>
        <td>нет</td>
        <td></td>
      </tr>       <td>Orgchart</td>
        <td>Имя файла экспорта. </td>
      </tr>
      <tr>
        <td>exportFileextension</td>
        <td>string</td>
        <td>нет</td>
        <td>png</td>
        <td>Расширение файла экспорта. </td>
      </tr>
      <tr>
        <td>chartClass</td>
        <td>string</td>
        <td>нет</td>
        <td></td>
        <td>Добавляет пользовательский CSS-класс к структуре для добавления дополнительного стиля, особенно когда структура должна быть встроена в контейнер DIV. </td>
      </tr>
      <tr>
        <td>draggable</td>
        <td>boolean</td>
        <td>нет</td>
        <td>false</td>
        <td>Активация этого параметра позволяет пользователю перетаскивать узлы для изменения структуры. **Внимание:** Перетаскивание родительского узла под его дочерний узел недопустимо. </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td>Поскольку если плагин подчинится такой операции, это приведет к образованию изолированных поддеревьев; данная опция недоступна в браузере Internet Explorer. </td>
      </tr>
      <tr>
        <td>dropCriteria</td>
        <td>function</td>
        <td>нет</td>
        <td></td>
        <td>Пользователи могут настроить более детальные критерии для ограничения перемещения узлов с помощью данного параметра. Вам необходимо предоставить функцию, которая возвращает значение типа boolean, используемую для проверки, разрешено ли извлечение узла из области перетаскивания и вставка его в область размещения после завершения операции перетаскивания. Функция принимает три параметра: draggedNode, dragZone, dropZone. </td>
      </tr>
      <tr>
        <td>initCompleted</td>
        <td>function</td>
        <td>нет</td>
        <td></td>
  </tr>       <td>После завершения инициализации диаграммы организационной структуры, вызывается функция обратного вызова, указанная этим параметром. Функция принимает один параметр: "$chart", который представляет собой объект jQuery инициализированной диаграммы организационной структуры.</td>
      </tr>
    </tbody>
  </table>
```### Методы
Мы уверены, что после изучения демо-примера [edit orgchart](http://dabeng.github.io/OrgChart/edit-orgchart/) вы овладеете всеми методами плагина orgchart.```#### var oc = $container.orgchart(options)
Встраивает организационную структуру в указанный контейнер. Этот метод принимает параметры options, подробности которых можно найти в разделе "Параметры". Здесь oc является экземпляром класса OrgChart.

#### init(newOptions)
Этот метод используется для обновления организационной структуры на основе новых параметров или источника данных.

#### addAncestors(data, parentId)
Добавляет предков к текущей организационной структуре, что может включать несколько уровней.
<table>
  <thead>
    <tr>
      <th>Название</th>
      <th>Тип</th>
      <th>Обязательный</th>
      <th>Значение по умолчанию</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>json</td>
      <td>да</td>
      <td></td>
      <td>Источник данных для построения предков</td>
    </tr>
    <tr>
      <td>parentId</td>
      <td>string</td>
      <td>да</td>
      <td></td>
      <td>ID узла, к которому добавляются предки</td>
    </tr>
  </tbody>
</table>

#### addDescendants(data, $parent)
Добавляет потомков к указанному родительскому узлу.
<table>
  <thead>
    <tr>
      <th>Название</th>
      <th>Тип</th>
      <th>Обязательный</th>
      <th>Значение по умолчанию</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>массив</td>
      <td>да</td>
      <td></td>
      <td>Источник данных для построения потомков</td>
    </tr>
    <tr>
      <td>$parent</td>
      <td>объект jQuery</td>
      <td>да</td>
      <td></td>
      <td>Объект родительского узла, к которому добавляются потомки</td>
    </tr>
  </tbody>
</table>#### addParent(data)
Добавляет родительский узел к текущей организационной структуре.
<table>
  <thead>
    <tr>
      <th>Название</th>
      <th>Тип</th>
      <th>Обязательный</th>
      <th>Значение по умолчанию</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>объект JSON</td>
      <td>Да</td>
      <td></td>
      <td>Источник данных для построения родительского узла</td>
    </tr>
  </tbody>
</table>

#### addSiblings($node, data)
Добавляет братьев для указанного узла.
<table>
  <thead>
    <tr>
      <th>Название</th>
      <th>Тип</th>
      <th>Обязательный</th>
      <th>Значение по умолчанию</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$node</td>
      <td>jQuery object</td>
      <td>Да</td>
      <td></td>
      <td>Узел, для которого добавляются братья</td>
    </tr>
    <tr>
      <td>data</td>
      <td>массив</td>
      <td>Да</td>
      <td></td>
      <td>Источник данных для создания братьев узлов</td>
    </tr>
  </tbody>
</table>

#### addChildren($node, data)
Добавляет дочерние узлы для указанного узла.
<table>
  <thead>
    <tr>
      <th>Название</th>
      <th>Тип</th>
      <th>Обязательный</th>
      <th>Значение по умолчанию</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$node</td>
      <td>jQuery object</td>
      <td>Да</td>
      <td></td>
      <td>Узел, для которого добавляются дочерние узлы.</td>
    </tr>
    <tr>
      <td>data</td>
      <td>массив</td>
      <td>Да</td>
      <td></td>
      <td>Источник данных для дочерних узлов.</td>
    </tr>
  </tbody>
</table>#### removeNodes($node)
Удаляет указанный узел и его потомков.
<table>
  <thead>
    <tr>
      <th>Название</th>
      <th>Тип</th>
      <th>Обязательный</th>
      <th>Значение по умолчанию</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$node</td>
      <td>jquery object</td>
      <td>Да</td>
      <td></td>
      <td>Узел для удаления.</td>
    </tr>
  </tbody>
</table>#### getHierarchy()
Этот метод предназначен для предоставления иерархической структуры организации. Например, после того как вы внесли изменения в структуру организации, вы можете использовать этот метод для получения обновленной структуры и сохранения её в фоновом режиме.

<table>
  <tr>
    <th>Название</th>
    <th>Тип</th>
    <th>Обязательный</th>
    <th>Значение по умолчанию</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>includeNodeData</td>
    <td>Boolean</td>
    <td>Нет</td>
    <td>false</td>
    <td>Если значение этого параметра равно true, то в экспортируемой иерархической структуре будут включены данные узлов (nodeData).</td>
  </tr>
</table>

#### hideParent($node)
Скрывает родительский узел для указанного узла. Включает скрытие братьев и предков этого узла.
<table>
  <tr>
    <th>Название</th>
    <th>Тип</th>
    <th>Обязательный</th>
    <th>Значение по умолчанию</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>$node</td>
    <td>JQuery Object</td>
    <td>Да</td>
    <td>Нет</td>
    <td>Указанный узел в виде объекта JQuery.</td>
  </tr>
</table>

#### showParent($node)
Показывает родительский узел для указанного узла. Не включает показ предков более высокого уровня.
<table>
  <tr>
    <th>Название</th>
    <th>Тип</th>
    <th>Обязательный</th>
    <th>Значение по умолчанию</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>$node</td>
    <td>JQuery Object</td>
    <td>Да</td>
    <td></td>
    <td>Указанный узел в виде объекта JQuery.</td>
  </tr>
</table>

#### hideChildren($node)
Скрывает дочерние узлы указанного узла, включая всех его потомков.<table>
  <tr>
    <th>Имя</th>
    <th>Тип</th>
    <th>Обязательный</th>
    <th>Значение по умолчанию</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>$node</td>
    <td>JQuery Object</td>
    <td>Да</td>
    <td></td>
    <td>jQuery объект указанного узла.</td>
  </tr>
</table>

#### showChildren($node)
Отображает дочерние узлы указанного узла. По умолчанию отображаются только непосредственные дочерние узлы, не включая всех его потомков.

<table>
  <tr>
    <th>Имя</th>
    <th>Тип</th>
    <th>Обязательный</th>
    <th>Значение по умолчанию</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>$node</td>
    <td>JQuery Object</td>
    <td>Да</td>
    <td></td>
    <td>jQuery объект указанного узла.</td>
  </tr>
</table>

#### hideSiblings($node, direction)
Скрывает братские узлы указанного узла.

<table>
  <tr>
    <th>Имя</th>
    <th>Тип</th>
    <th>Обязательный</th>
    <th>Значение по умолчанию</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>$node</td>
    <td>JQuery Object</td>
    <td>Да</td>
    <td></td>
    <td>jQuery объект указанного узла.</td>
  </tr>
  <tr>
    <td>direction</td>
    <td>string</td>
    <td>Нет</td>
    <td></td>
    <td>Доступные значения: "left" и "right". Если указано направление, скрываются только братские узлы в указанном направлении. Если параметр не указан, скрываются все братские узлы.</td>
  </tr>
</table>

#### showSiblings($node, direction)
Отображает братские узлы указанного узла.<table>
  <tr>
    <th>Имя</th>
    <th>Тип</th>
    <th>Обязательный</th>
    <th>Значение по умолчанию</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>$node</td>
    <td>JQuery Object</td>
    <td>Да</td>
    <td></td>
    <td>jQuery объект указанного узла.</td>
  </tr>
  <tr>
    <td>direction</td>
    <td>string</td>
    <td>Нет</td>
    <td></td>
    <td>Доступные значения: "left" и "right". Если указано направление, отображаются только братские узлы в указанном направлении. Если параметр не указан, отображаются все братские узлы.</td>
  </tr>
</table>#### getNodeState($node, relation)
Этот метод помогает вам определить состояние отображения связанных узлов указанного узла.

<table>
  <tr>
    <th>Имя</th>
    <th>Тип</th>
    <th>Обязательное</th>
    <th>Значение по умолчанию</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>$node</td>
    <td>JQuery Object</td>
    <td>Да</td>
    <td></td>
    <td>jQuery объект, представляющий указанный узел.</td>
  </tr>
  <tr>
    <td>relation</td>
    <td>String</td>
    <td>Да</td>
    <td></td>
    <td>Допустимые значения: "parent", "children" и "siblings". Указывает конкретное отношение, после чего метод возвращает состояние отображения связанных узлов.</td>
  </tr>
</table>

Структура возвращаемого объекта метода:
```js
{
  "exist": true|false, // указывает, существует ли родительский узел, дочерний узел или братский узел
  "visible": true|false // указывает, видим ли соответствующий узел в данный момент
}

$('.orgchart').addClass('noncollapsable'); // Отключить разворачивание/сворачивание

$('.orgchart').removeClass('noncollapsable'); // Включить разворачивание/сворачивание