# С версии 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 состоит из трех символов "0" или "1", где:
  // 1-й символ указывает, имеет ли текущий узел родительский узел
  // 2-й символ указывает, имеет ли текущий узел братский узел
  // 3-й символ указывает, имеет ли текущий узел дочерние узлы
  'children': [ // Это свойство представляет вложенные узлы.
}    { 'name': 'Bo Miao', 'title': 'department manager', 'relationship': '110' },
     { 'name': 'Su Miao', 'title': 'department manager', 'relationship': '111',
       'children': [
         { 'name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '110' },
         { 'name': 'Hei Hei', 'title': 'senior engineer', 'relationship': '110' }
       ]
     },
     { 'name': 'Yu Jie', 'title': 'department manager', '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>число</td>
        <td>Нет</td>
        <td>7</td>
        <td>Максимальное значение увеличения масштаба.</td>
      </tr>
      <tr>
        <td>zoomoutLimit</td>
        <td>число</td>
        <td>Нет</td>
        <td>0.5</td>
        <td>Минимальное значение уменьшения масштаба.</td>
      </tr>
    </tbody>
  </table>
       <td>0.5</td>
        <td>Минимальное значение уменьшения масштаба.</td>
      </tr>
      <tr>
        <td>direction</td>
        <td>строка</td>
        <td>Нет</td>
        <td>"t2b"</td>
        <td>Этот параметр используется для установки направления размещения. "t2b" означает от верхнего к нижнему, это значение по умолчанию. "b2t" означает от нижнего к верхнему. "l2r" означает от левого к правому. "r2l" означает от правого к левому.</td>
      </tr>
      <tr>
        <td>verticalLevel</td>
        <td>целое число (>=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>положительное целое число</td>
        <td>Нет</td>
        <td>999</td>
        <td>Этот параметр указывает, на каком уровне будут видны узлы при инициализации организационной структуры.</td>
      </tr>
      <tr>
        <td>nodeTitle</td>
        <td>строка</td>
        <td>Нет</td>
        <td>"name"</td>
        <td>Связывает заголовок узла по умолчанию с атрибутом данных источника.</td>
      </tr>
      <tr>
        <td>parentNodeSymbol</td>
        <td>строка</td>
        <td>нет</td>
        <td>"oci-leader"</td>
      </tr>       <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>"Orgchart"</td>
        <td>Имя файла экспорта</td>
      </tr>
      <tr>
        <td>exportFileextension</td>
        <td>string</td>
        <td>нет</td>
        <td></td>
      </tr>       <td>"png"</td>
        <td>Расширение файла экспорта</td>
      </tr>
      <tr>
        <td>chartClass</td>
        <td>string</td>
        <td>нет</td>
        <td>""</td>
        <td>Добавляет пользовательский CSS-класс к структуре для добавления дополнительного стиля, особенно важно, если структура должна содержать лидерскую диаграмму</td>
      </tr>
      <tr>
        <td>draggable</td>
        <td>boolean</td>
        <td>нет</td>
        <td>false</td>
        <td>Активирует этот параметр, позволяя пользователю изменять структуру путем перетаскивания узлов. **Внимание:** Перетаскивание родительского узла в его подузел недопустимо</td>
      </tr>```markdown
 <table>
   <tbody>
     <tr>
       <td>изолирующий подграф</td>
       <td>из-за того, что если плагин подчинится такой операции, это приведет к образованию изолированного подграфа; данная опция недоступна в браузере Internet Explorer.</td>
     </tr>
     <tr>
       <td>dropCriteria</td>
       <td>функция</td>
       <td>нет</td>
       <td></td>
       <td>пользователи могут настроить более детальные критерии для ограничения перемещения узлов с помощью данной опции. Вам необходимо предоставить функцию, которая возвращает значение типа boolean, и которая используется для проверки, разрешено ли извлечение текущего перемещаемого узла из области перетаскивания и вставка его в область назначения после завершения операции перетаскивания. Функция принимает три параметра: draggedNode, dragZone, dropZone.</td>
     </tr>
     <tr>
       <td>initCompleted</td>
       <td>функция</td>
       <td>нет</td>
       <td></td>
       <td>вызывается после завершения инициализации структуры. Эта функция может быть использована для выполнения дополнительных действий после инициализации, например, для выполнения проверки или для выполнения дополнительных настроек.</td>
     </tr>
   </tbody>
 </table>      <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)
Метод для определения состояния отображения связанных узлов указанного узла.

| Название | Тип | Обязательное | Значение по умолчанию | Описание |
| --- | --- | --- | --- | --- |
| $node | JQuery Object | Да | | jQuery-объект, указывающий на определенный узел. |
| relation | String | Да | | Допустимые значения: "parent", "children" и "siblings". Указывает конкретное отношение и возвращает состояние отображения связанного узла. |

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

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

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