Vueztree詳解

一、簡介

Vueztree是一個基於Vue.js的樹形組件庫，它可以快速的為我們創建 tree 控件。控件在DOM中的數據結構是樹形結構。它支持自定義節點內容、渲染、數據綁定、異步加載以及其他高級功能。

二、安裝方法

Vueztree可以使用 yarn 和 npm 進行安裝。

使用 npm:

npm install vueztree -save

使用 yarn:

yarn add vueztree

三、基礎用法

以下是渲染一個簡單的靜態樹的代碼示例:

<template>
  <div>
    <ztree :data="treeData" />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父節點 1',
          children: [
            { name: '子節點 1' },
            { name: '子節點 2' }
          ]
        },
        { name: '父節點 2' }
      ]
    }
  }
}
</script>

以上代碼渲染出的效果如下：

四、圖標設置

節點可以自定義設置圖標，以下是設置圖標的代碼示例：

<template>
  <div>
    <ztree
      :data="treeData"
      :setting="{
        view: {
          fontCss: { color: 'red' },
          addDiyDom: function (treeId, node) {
            if (node.level === 2) {
              var aObj = node.aObj;
              var editStr =
                '<span class="button edit" id="' +
                node.tId +
                '_edit" title="edit"></span>';
              aObj.after(editStr);
              var btn = $(node, treeId).find('span.edit');
              if (btn)
                btn.bind('click', function () {
                  alert('edit button click for ' + node.name);
                });
            }
          }
        },
        edit: {
          enable: true
        }
      }"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父節點 1',
          icon: '/img/1.png',
          children: [
            { name: '子節點 1', icon: '/img/2.png' },
            { name: '子節點 2', icon: '/img/3.png' },
            { name: '子節點 3', icon: '/img/4.png' }
          ]
        },
        { name: '父節點 2', icon: '/img/5.png' }
      ]
    }
  }
}
</script>

以上代碼渲染出的效果如下：

五、異步加載

Vueztree 支持異步加載節點數據，以下是使用異步加載的代碼示例：

<template>
  <div>
    <ztree
      :data="treeData"
      :async="{
        enable: true,
        url: '/getNodes',
        autoParam: ['id'],
        dataFilter: function (treeId, parentNode, responseData) {
          return responseData.nodes;
        }
      }"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父節點 1',
          id: 1,
          isParent: true
        },
        {
          name: '父節點 2',
          id: 2,
          isParent: true
        }
      ]
    }
  }
}
</script>

以上代碼渲染出的效果如下：

六、過濾器

通過 Vueztree 內置的兩個過濾器，用戶可以輕鬆的過濾樹上的節點，以下是使用過濾器的代碼示例：

<template>
  <div>
    <input v-model="keyword" placeholder="輸入關鍵詞進行過濾" />
    <ztree
      :data="treeData"
      :filter="{
        type: 'fun',
        filter:function (node) {
          return node.name.indexOf(keyword) !== -1;
        }
      }"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      keyword: '',
      treeData: [
        {
          name: '父節點 1',
          children: [
            { name: '子節點 1' },
            { name: '子節點 2' }
          ]
        },
        { name: '父節點 2' }
      ]
    }
  }
}
</script>

以上代碼渲染出的效果如下：

七、複選框

Vueztree 內置了複選框，以下是使用複選框的代碼示例：

<template>
  <div>
    <ztree
      :data="treeData"
      :checkable="true"
      @on-check-change="onCheckChange"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父節點 1',
          id: 1,
          children: [
            { name: '子節點 1', id: 2 },
            { name: '子節點 2', id: 3 }
          ]
        },
        { name: '父節點 2', id: 4 }
      ]
    }
  },
  methods: {
    onCheckChange (checkedNodes) {
      console.log(checkedNodes.map((node) => node.name));
    }
  }
}
</script>

以上代碼渲染出的效果如下：

八、拖動

Vueztree 還支持節點拖動，可以實現節點拖動到同一父節點下或不同父節點下，以下是使用拖動的代碼示例：

<template>
  <div>
    <ztree
      :data="treeData"
      :droppable="true"
      @on-drag-move="onDragMove"
      @on-drop="onDrop"
      :setting="{
        edit: {
          drag: {
            inner: true,
            isCopy: true
          },
          enable: true
        }
      }"
    />
  </div>
</template>

<script>
import ztree from 'vueztree';

export default {
  components: { ztree },
  data () {
    return {
      treeData: [
        {
          name: '父節點 1',
          id: 1,
          children: [
            { name: '子節點 1', id: 2 },
            { name: '子節點 2', id: 3 }
          ]
        },
        { name: '父節點 2', id: 4 }
      ]
    };
  },
  methods: {
    onDragMove ({ event, treeId, treeNodes }) {
      console.log('drag move event', event);
      console.log('drag move treeId', treeId);
      console.log('drag move nodes', treeNodes);
    },
    onDrop ({ event, treeId, targetNode, moveType, treeNodes }) {
      console.log('drop event', event);
      console.log('drop treeId', treeId);
      console.log('drop nodes', treeNodes);
      console.log('drop target node', targetNode);
      console.log('drop moveType', moveType);
      console.log('new parent', targetNode.getParentNode());
    }
  }
}
</script>

以上代碼渲染出的效果如下：