Interactive Tree View For Vue.js 2 – VJstree

Description:

An interactive tree structure component for Vue.js 2 app.

Usage:

Install and import the tree view component.

import VJstree from 'vue-jstree'

Create a new tree view.

<v-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>

new Vue({
  data: {
    data: [
      {
        "text": "Same but with checkboxes",
        "children": [
          {
            "text": "initially selected",
            "selected": true
          },
          {
            "text": "custom icon",
            "icon": "fa fa-warning icon-state-danger"
          },
          {
            "text": "initially open",
            "icon": "fa fa-folder icon-state-default",
            "opened": true,
            "children": [
              {
                "text": "Another node"
              }
            ]
          },
          {
            "text": "custom icon",
            "icon": "fa fa-warning icon-state-warning"
          },
          {
            "text": "disabled node",
            "icon": "fa fa-check icon-state-success",
            "disabled": true
          }
        ]
      },
      {
        "text": "Same but with checkboxes",
        "opened": true,
        "children": [
          {
            "text": "initially selected",
            "selected": true
          },
          {
            "text": "custom icon",
            "icon": "fa fa-warning icon-state-danger"
          },
          {
            "text": "initially open",
            "icon": "fa fa-folder icon-state-default",
            "opened": true,
            "children": [
              {
                "text": "Another node"
              }
            ]
          },
          {
            "text": "custom icon",
            "icon": "fa fa-warning icon-state-warning"
          },
          {
            "text": "disabled node",
            "icon": "fa fa-check icon-state-success",
            "disabled": true
          }
        ]
      },
      {
        "text": "And wholerow selection"
      }
    ]
  },
  methods: {
    itemClick (node) {
      console.log(node.model.text + ' clicked !')
    }
  }
})

Props:

props: {
  data: {type: Array},
  size: {type: String, validator: value => ['large', 'small'].indexOf(value) > -1},
  showCheckbox: {type: Boolean, default: false},
  wholeRow: {type: Boolean, default: false},
  noDots: {type: Boolean, default: false},
  multiple: {type: Boolean, default: false},
  allowBatch: {type: Boolean, default: false},
  textFieldName: {type: String, default: 'text'},
  valueFieldName: {type: String, default: 'value'},
  async: {type: Function},
  loadingText: {type: String, default: 'Loading...'},
  draggable: {type: Boolean, default: false},
  klass: String
},

Preview:

Interactive Tree View For Vue.js 2

Download Details:

Author: zdy1988

Live Demo: https://github.com/zdy1988/vue-jstree/blob/master/index.html

Download Link: https://github.com/zdy1988/vue-jstree/archive/master.zip

Official Website: https://github.com/zdy1988/vue-jstree

Last Update: November 14, 2017

Install:

# NPM
$ npm install vue-jstree --save

You Might Be Interested In:

Tags:

Add Comment