# vue-jstree

> a tree plugin for vue2

Latest version **2.1.6** (published 2018-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-jstree
pnpm add vue-jstree
yarn add vue-jstree
bun add vue-jstree
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.6 |
| Published | 2018-04-25 |
| First published | 2017-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 458.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 632 |
| Author | zdy1988 |
| Maintainers | zdy1988 |
| Keywords | vue2, tree |

## Links

- npm: https://www.npmjs.com/package/vue-jstree
- Repository: https://github.com/zdy1988/vue-jstree
- Homepage: https://github.com/zdy1988/vue-jstree#readme
- Issues: https://github.com/zdy1988/vue-jstree/issues
- npm.io page: https://npm.io/package/vue-jstree

## Recent versions

- 2.1.6 (latest) — 2018-04-25
- 2.1.5 — 2018-04-24
- 2.1.4 — 2018-04-23
- 2.1.3 — 2018-04-23
- 2.1.2 — 2018-04-21
- 2.1.1 — 2018-04-21
- 2.1.0 — 2018-04-20
- 1.2.0 — 2018-04-20
- 1.0.16 — 2018-04-19
- 1.0.15 — 2018-04-18
- 1.0.14 — 2018-04-18
- 1.0.13 — 2018-04-17
- 1.0.12 — 2018-04-12
- 1.0.11 — 2018-03-09
- 1.0.10 — 2018-01-04
- … 10 more at https://npm.io/package/vue-jstree/versions

## README

# vue-jstree

[![npm](https://img.shields.io/npm/dt/vue-jstree.svg?style=flat-square)](https://github.com/zdy1988/vue-jstree)

[English](./README.md)/[中文](./README-CN.md)

##  Introduction

A tree plugin for vue2

<img src="./pic.png" width="100%" align=center />

##  DEMO

[http://zdy1988.github.io/vue-jstree](http://zdy1988.github.io/vue-jstree)

##  NPM

```html
    npm install vue-jstree
```

##  ES6

```html
    import VJstree from 'vue-jstree'
    
    new Vue({
      components: {
        VJstree
      }
    })
```

##  Setup

```html
    npm install
    npm run dev
```

## Usage

```html
    <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 !')
        }
      }
    })
```

## API

| Props        | Type           | Default  |  Describe  |
| ------------- |:-------------:|:-----:|:--------------------------------------------------------|
| data      | Array |  |  set tree data  |
| size      | String      |   |  set tree item size , value : 'large' or '' or ''small' |
| show-checkbox | Boolean      |    false |   |
| allow-transition | Boolean      |    true |   |
| whole-row | Boolean      |    false |   |
| no-dots | Boolean      |    false |  |
| collapse | Boolean      |    false |  set all tree item collapse state |
| multiple | Boolean      |    false |  set multiple selected tree item  |
| allow-batch | Boolean      |    false |   |
| text-field-name | String      |    'text' |  set tree item display field |
| value-field-name | String      |    'value' |  set tree item value field |
| children-field-name | String      |    'children' |  set tree item children field |
| item-events | Object      |    {} |  register any event to tree item, [example](https://github.com/zdy1988/vue-jstree/blob/master/App.vue)  |
| async | Function      |     |  async load callback function , if node is a leaf ,you can set 'isLeaf: true' in data  |
| loading-text | String      |    'Loading' |  set loading text |
| draggable | Boolean      |    false |  set tree item can be dragged , selective drag and drop can set 'dragDisabled: true' and 'dropDisabled: true' , all default value is 'false' |
| drag-over-background-color | String | '#C9FDC9' |  set drag over background color |
| klass | String      |     |  set append tree class |

## Methods in node.model

| Method        | Params        |
| ------------- |:-------------:|
| addChild      | (object) newDataItem |
| addAfter      | (object) newDataItem, (object) selectedNode |
| addBefore     | (object) newDataItem, (object) selectedNode |
| openChildren  |  |
| closeChildren  |  |

## Event

**@item-click(node, item, e)**

**@item-toggle(node, item, e)**

**@item-drag-start(node, item, e)**

**@item-drag-end(node, item, e)**

**@item-drop-before(node, item, draggedItem, e)**

**@item-drop(node, item, draggedItem, e)**

**node** : current node vue object

**item** : current node data item object

**e** : event

## Data Item Optional Properties

| Name        | Type           | Default  | Describe  |
| ------------- |:-------------:| -----:|:----------------------------------------------|
| icon      | String      |   | custom icon css class |
| opened | Boolean      |    false | set leaf opened |
| selected | Boolean      |    false | set node selected |
| disabled | Boolean      |    false | set node disabled |
| isLeaf | Boolean      |    false | if node is a leaf , set true can hide '+' |
| dragDisabled | Boolean      |    false |  selective drag |
| dropDisabled | Boolean      |    false |  selective drop |

## Custom Item Example

```
     <v-jstree :data="data">
       <template scope="_">
         <div style="display: inherit; width: 200px" @click.ctrl="customItemClickWithCtrl">
           <i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i>
           {{_.model.text}}
           <button style="border: 0px; background-color: transparent; cursor: pointer;" @click="customItemClick(_.vm, _.model, $event)"><i class="fa fa-remove"></i></button>
         </div>
       </template>
     </v-jstree>

     **scope** be replaced in the **vue@2.5.0+** , over **vue@2.5.0+** use **slot-scope**
```

## License

Licensed under the [MIT license](https://opensource.org/licenses/mit-license.php).

Thanks For [jstree](https://github.com/vakata/jstree)'s UI

---
_Source: https://npm.io/package/vue-jstree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._