UNTree
介紹
垂直樹形控件, 使用TypeScript編寫, 可用作部門組織架構(gòu)樹, 任務(wù)分發(fā)樹展示等等, 可以傳入 json數(shù)組 或 已經(jīng)轉(zhuǎn)化后的json樹,支持垂直方向和水平方向(代碼可能不優(yōu),才看了TypeScript入門文檔)
預(yù)覽
垂直
水平
預(yù)覽地址: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();
options 解釋
| 參數(shù) | 說明 | 默認(rèn)值 | 可選值 |
|---|---|---|---|
| el | 加載元素 | ||
| jsonArr | 數(shù)據(jù) | [] | |
| selfIdField | 每條數(shù)據(jù)的主鍵字段 | id | |
| parentIdField | 每條數(shù)據(jù)的父級字段 | parent | |
| parentld | 第一級數(shù)據(jù)的父級id | "" | |
| text | 需要顯示的字段 | text | |
| mode(新增) | 顯示方向 | vertical | vertical | horizontal |
| type | 數(shù)據(jù)類型 | list | list | tree |
| viewClass | 自定義整體視圖class | ||
| itemClass | 自定義單獨項class | ||
| click | 單擊事件(返回三個參數(shù)itemId, itemData, itemNode) |
示例
- 加載json數(shù)組
<div id="un-tree--wrapper"></div>
JSON Array 數(shù)據(jù)
let listData = [
{
id: "99d78438-1f14-4552-ba77-039bff75e4bc",
text: "公司董事會",
parent: "root",
},
{
id: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
text: "總經(jīng)理",
parent: "99d78438-1f14-4552-ba77-039bff75e4bc",
},
{
id: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
text: "副總經(jīng)理1",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
},
{
id: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
text: "副總經(jīng)理2",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
},
{
id: "f135c05b-ffde-4d82-895f-a6daf052c178",
text: "副總經(jīng)理3",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
},
{
id: "234e9d2e-676b-4601-9820-e9b064761ff4",
text: "技術(shù)總監(jiān)",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
},
{
id: "7937421a-ee31-4988-934d-7e6469f0f37f",
text: "數(shù)據(jù)中心",
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: "財務(wù)部",
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: "技術(shù)部",
parent: "234e9d2e-676b-4601-9820-e9b064761ff4",
},
{
id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
text: "評估二部",
parent: "234e9d2e-676b-4601-9820-e9b064761ff4",
},
];
function handleClick(itemId, itemData, itemNode) {
console.log(itemId);
console.log(itemData);
console.log(itemNode);
}
let el = document.getElementById("un-tree--wrapper");
let tree = new UNTree({
el: el,
jsonArr: listData,
parentld: "root",
type: "list",
viewClass: "view-demo",
itemClass: "item-demo",
click: handleClick,
});
tree.render();
- 加載轉(zhuǎn)化后的json樹
<div id="un-tree--wrapper2"></div>
JSON Tree 數(shù)據(jù)
let treeData = [
{
id: "99d78438-1f14-4552-ba77-039bff75e4bc",
text: "公司董事會",
parent: "root",
children: [
{
id: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
text: "總經(jīng)理",
parent: "99d78438-1f14-4552-ba77-039bff75e4bc",
children: [
{
id: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
text: "副總經(jīng)理1",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
children: [
{
id:
"7937421a-ee31-4988-934d-7e6469f0f37f",
text: "數(shù)據(jù)中心",
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: "副總經(jīng)理2",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
children: [
{
id:
"e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
text: "財務(wù)部",
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",
text: "副總經(jīng)理3",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
children: [
{
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: "234e9d2e-676b-4601-9820-e9b064761ff4",
text: "技術(shù)總監(jiān)",
parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
children: [
{
id:
"9a0214ba-4afc-43ce-9851-fbc79dd48f25",
text: "技術(shù)部",
parent:
"234e9d2e-676b-4601-9820-e9b064761ff4",
},
{
id:
"71fc1ee3-5f31-49a8-8cdc-086c92bff785",
text: "評估二部",
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,
parentld: "root",
type: "tree",
viewClass: "view-demo",
itemClass: "item-demo",
click: handleClick,
});
tree2.render();
- 改變方向為"水平",
只需要 改變參數(shù)
mode的值為horizontal即可
let tree2 = new UNTree({
el: el2,
jsonArr: treeData,
parentld: "root",
mode: "horizontal"
type: "tree",
viewClass: "view-demo",
itemClass: "item-demo",
click: handleClick,
});
tree2.render();
