cnc-vue-jstree

A tree plugin for vue2 based on projects: https://github.com/zdy1988/vue-jstree and its fork https://github.com/lucafaggianelli/vue-jstree, insipred by JStree project and adapted for Vue. It had a drag-and-drop capability, but it was missing ability to move item between exising items, like the project https://github.com/plantain-00/tree-component

Also we added support for flat data source received from database with defined parentID.

NPM

    npm install cnc-vue-jstree

ES6

    import cncVueTree from 'cnc-vue-jstree'

    new Vue({
      components: {
        cncVueTree
      }
    })

Setup

    npm install
    npm run dev

Usage

With flat model

    <cnc-vue-jstree :data="data" show-checkbox multiple allow-batch whole-row draggable data-is-flat 
    text-field-name="title" id-field-name="id" order-field-name="order" parent-field-name="parent" 
    @item-drop="itemDrop" @item-click="itemClick"></cnc-vue-jstree>

    new Vue({
      data: {
        data: [
          {
            'id': '1',
            'order': 'A',
            'title': 'Same but with checkboxes'
          },
          {
            'id': '2',
            'parent': '1',
            'order': 'B',
            'title': 'initially selected',
            'selected': true
          },
          {
            'id': '3',
            'parent': '1',
            'order': 'C',
            'title': 'custom icon',
            'icon': 'fa fa-warning icon-state-danger'
          },
          {
            'id': '4',
            'parent': '1',
            'order': 'D',
            'title': 'initially open',
            'icon': 'fa fa-folder icon-state-default',
            'opened': true
          },
          {
            'id': '5',
            'parent': '4',
            'order': 'E',
            'title': 'Another node'
          },
          {
            'id': '6',
            'parent': '1',
            'order': 'G',
            'title': 'custom icon',
            'icon': 'fa fa-warning icon-state-warning'
          },
          {
            'id': '7',
            'parent': '1',
            'order': 'M',
            'title': 'disabled node',
            'icon': 'fa fa-check icon-state-success',
            'disabled': true
          },
          {
            'id': '8',
            'order': 'AA',
            'title': 'And wholerow selection'
          }
        ]
      },
      methods: {
        itemClick (node) {
          console.log(node.model.id + ' clicked !')
        },
        itemDrop (source, destination, changeObj) {
          console.log('dropped', source.title, destination.title, changeObj)
        }
      }
    })

With nested model

    <cnc-vue-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></cnc-vue-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 !')
        }
      }
    })

API

Vue Props

| Props | Type | Default | | ------------- |:-------------:| -----:| | data | Array | | | size | String | | | dataIsFlat | Boolean | false | | showCheckbox | Boolean | false | | wholeRow | Boolean | false | | noDots | Boolean | false | | multiple | Boolean | false | | allowBatch | Boolean | false | | textFieldName | String | 'text' | | orderFieldName | String | 'text' | | idFieldName | String | 'text' | | parentFieldName | String | 'text' | | valueFieldName | Boolean | 'value' | | async | Function | | | loadingText | String | 'Loading' | | draggable | Boolean | false | | klass | String | |

Data Item Optional Properties

| Name | Type | Default | | ------------- |:-------------:| -----:| | icon | String | | | opened | Boolean | false | | selected | Boolean | false | | disabled | Boolean | false |

Events

item-click(item)

item-drop(child, parent)

Publish new relese

• Update package.json with new version number
• Compile new distribution npm run build
• Commit to GIT

git add --all
git commit -m "fix bug supporting Esc on item edit"
git push -u origin master

• Commit to NPM npm publish

License

Licensed under the MIT license.

Thanks For jstree's UI