垂直樹形控件, 使用TypeScript編寫, 可用做部門組織架構樹, 任務分發樹展現...

時間 2019-11-05

標籤垂直控件使用 typescript 編寫可用部門組織架構任務分發展現欄目系統架構简体版

原文原文鏈接

UNTree

介紹

垂直樹形控件, 使用TypeScript編寫, 可用做部門組織架構樹, 任務分發樹展現等等, 能夠傳入 json數組或已經轉化後的json樹,支持垂直方向和水平方向(代碼可能不優,纔看了TypeScript入門文檔)javascript

預覽

預覽地址:https://zhuzhaofeng.gitee.io/untree/html

GitHub Giteejava

使用

引入dist/un-tree.min.jsgit

<script src="./un-tree.min.js" type="text/javascript" charset="utf-8"></script>
複製代碼

初始化樹github

let tree = new UNTree(options);
tree.render();
複製代碼

options 解釋json

參數	說明	默認值	可選值
el	加載元素
jsonArr	數據	[]
selfIdField	每條數據的主鍵字段	id
parentIdField	每條數據的父級字段	parent
parentld	第一級數據的父級id	""
text	須要顯示的字段	text
mode(新增)	顯示方向	vertical	vertical \| horizontal
type	數據類型	list	list \| tree
viewClass	自定義總體視圖class
itemClass	自定義單獨項class
click	單擊事件(返回三個參數itemId, itemData, itemNode)

示例

加載json數組數組

<div id="un-tree--wrapper"></div>
複製代碼

`JSON Array` 數據

let listData = [{...}](點擊查看詳情)

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",
  },
  {
    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();
複製代碼

加載轉化後的json樹bash

<div id="un-tree--wrapper2"></div>
複製代碼

`JSON Tree` 數據

let treeData = [{...}](點擊查看詳情)

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",
            text: "副總經理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: "技術總監",
            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: "評估二部",
                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();
複製代碼

改變方向爲"水平",

只須要改變參數 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();
複製代碼