Слияние кода завершено, страница обновится автоматически
Позволяет создавать вертикальное дерево с использованием TypeScript. Проект собран через webpack с sourcemap размером 31 кБ, без sourcemap — 12 кБ. Подходит для отображения организационной структуры компании, распределения задач и других целей. Можно передать JSON массив или уже преобразованное JSON дерево. Поддерживает как вертикальное, так и горизонтальное направление.
https://zhuzhaofeng.gitee.io/untree/
Включите
dist/un-tree.min.js
<script src="./un-tree.min.js" type="text/javascript" charset="utf-8"></script>
Инициализация дерева
let tree = new UNTree(options);
tree.render();
Описание параметров| Параметр | Описание | По умолчанию | Допустимые значения | | ----------- | ---------------------------------------------------- | ------------ | -------------------| | el | Элемент загрузки | | | | jsonArr | Данные | [] | | | selfIdField | Поле уникального идентификатора для каждого элемента | id | | | parentIdField | Поле родительского идентификатора | parent | | | parentid | ID первого уровня данных | "" | | | text | Поле для отображаемого текста | text | | | mode(новый) | Направление отображения | vertical | vertical | horizontal | | type | Тип данных | list | list | tree | | viewClass | Кастомный класс для всего представления | | | | itemClass | Кастомный класс для каждого элемента | | | | click | Обработчик события клика (возвращает три параметра itemId, itemData, itemNode) | | |
Положение "parentld" заменено на "parentid".#### Пример использования
let listData = [ { id: "99d78438-1f14-4552-ba77-039bff75e4bc", text: "Комитет директоров компании", parent: "root", }, { id: "d2eb4680-4cee-4549-8a0f-171fd9888f4b", text: "Генеральный директор", parent: "99d78438-1f14-4552-ba77-039bff75e4bc", }, { id: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f", text: "Заместитель генерального директора №1", parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b", }, { id: "b05991b4-8944-4dd8-92c4-ffd7848e7112", text: "Заместитель генерального директора №2", parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b", }, { id: "f135c05b-ffde-4d82-895f-a6daf052c178", text: "Заместитель генерального директора №3", parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b", }, { id: "234e9d2e-676b-4601-9820-e9b064761ff4", text: "Директор по технологиям", parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b", }, { id: "7937421a-ee31-4988-934d-7e6469f0f37f", text: "Центр данных", parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f", }, { id: "11c1b052-89f8-4873-a876-6de6130385e5", text: "Методический центр", parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f", }, { id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4", text: "Финансовый отдел", parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112", }, { id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4", text: "Офис", parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112", }, { id: "bc407b45-56ef-4bdc-ab31-325d4cad5243", text: "Отдел проектов", parent: "f135c05b-ffde-4d82-895f-a6daf052c178", }, { id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785", text: "Первый отдел оценки", parent: "f135c05b-ffde-4d82-895f-a6daf052c178", }, { id: "9a0214ba-4afc-43ce-9851-fbc79dd48f25", text: "Отдел технологий", parent: "234e9d2e-676b-4601-9820-e9b064761ff4", } ];```markdown [ { "id": "71fc1ee3-5f31-49a8-8cdc-086c92bff785", "text": "Второй отдел оценки", "parent": "234e9d2e-676b-4601-9820-e9b064761ff4" } ]
console.log(itemId);
console.log(itemData);
console.log(itemNode);
}
let el = document.getElementById("un-tree--wrapper");
let tree = new UNTree({
el: el,
jsonArr: listData,
parentid: "root",
type: "list",
viewClass: "view-demo",
itemClass: "item-demo",
click: handleClick,
});
tree.render();
```- Загрузка преобразованного JSON-дерева``````html
<div id="un-tree--wrapper2"></div>
let treeData = [
{
id: "99d78438-1f14-4552-ba77-039bff75e4bc",
text: "Комитет директоров компании",
parent: "root",
children: [
{
id: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
text: "Генеральный директор",
parent: "99d78438-1f14-4552-ba77-039bff75e4bc",
children: [
{
id: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
text: "Заместитель генерального директора №1",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
children: [
{
id: "7937421a-ee31-4988-934d-7e6469f0f37f",
text: "Данные центра",
parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f"
},
{
id: "11c1b052-89f8-4873-a876-6de6130385e5",
text: "Методический центр",
parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f"
}
]
},
{
id: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
text: "Заместитель генерального директора №2",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
children: [
{
id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
text: "Финансовый отдел",
parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112"
},
{
id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
text: "Офис",
parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112"
}
]
},
{
id: "f135c05b-ffde-4d82-895f-a6daf052c178",
``````json
[
{
id: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
text: "Заместитель генерального директора №3",
parent: null,
children: [
{
id: "bc407b45-56ef-4bdc-ab31-325d4cad5243",
text: "Отдел проектов",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b"
},
{
id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
text: "Отдел оценки №1",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b"
}
]
},
{
id: "234e9d2e-676b-4601-9820-e9b064761ff4",
text: "Технический директор",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
children: [
{
id: "9a0214ba-4afc-43ce-9851-fbc79dd48f25",
text: "Отдел техники",
parent: "234e9d2e-676b-4601-9820-e9b064761ff4"
},
{
id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
text: "Оценочная группа 2",
parent: "234e9d2e-676b-4601-9820-e9b064761ff4"
}
]
}
];
],
},
{
id: "234e9d2e-676b-4601-9820-e9b064761ff4",
text: "Технический директор",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
children: [
{
id: "9a0214ba-4afc-43ce-9851-fbc79dd48f25",
text: "Отдел техники",
parent: "234e9d2e-676b-4601-9820-e9b064761ff4"
},
{
id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
text: "Оценочная группа 2",
parent: "234e9d2e-676b-4601-9820-e9b064761ff4"
}
]
}
]
function handleClick(itemId, itemData, itemNode) {
console.log(itemId);
console.log(itemData);
console.log(itemNode);
}
let el2 = document.getElementById("un-tree--wrapper2");
let tree2 = new UNTree({
el: el2,
jsonArr: treeData,
parentId: "root",
type: "tree",
viewClass: "view-demo",
itemClass: "item-demo",
click: handleClick
});
tree2.render();
let tree2 = new UNTree({
el: el2,
jsonArr: treeData,
parentId: "root",
type: "tree",
direction: "horizontal", // Изменено на "horizontal"
viewClass: "view-demo",
itemClass: "item-demo",
click: handleClick
});
```> Для этого достаточно изменить значение параметра `mode` на `горизонтальное`
```markdown
let tree2 = new UNTree({
el: el2,
jsonArr: treeData,
parentid: "root",
mode: "горизонтальное",
type: "tree",
viewClass: "view-demo",
itemClass: "item-demo",
click: handleClick,
});
tree2.render();
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )