@widgetjs/tree v1.8.3

@widgetjs/tree

A lightweight flexible tree widget.

Features

• 🚀 Compatible with VanillaJS / React / Vue
• ✂️ Tiny size after gzip
• 🎊 Zero dependence
• 🎉 Events supported

Demo

Online Demo

Install

npm i -S @widgetjs/tree

Usage

React/Vue usage

import Tree from '@widgetjs/tree';

VanillaJS usage

<script src="path/to/tree.min.js"></script>

Initialize

new Tree(treeContainer, parameters), returns initialized Tree instance.

• treeContainer - string - css selector of the tree container(document.querySelector inside).
• parameters - object - options of the tree.

Basic Node Format

{
  "id": "unique_ID",
  "text": "node-0",
  "attributes": {},
  "children": [],
  "check": true
}

Example

const myTree = new Tree('#container', {
  url: '/api/treeJson',
});

Parameters

Example

const treeData = [
  {
    id: '0',
    text: 'node-0',
    children: [
      {
        id: '0-0',
        text: 'node-0-0',
        children: [
          {id: '0-0-0', text: 'node-0-0-0'},
          {id: '0-0-1', text: 'node-0-0-1'},
          {id: '0-0-2', text: 'node-0-0-2'},
        ],
      },
      {id: '0-1', text: 'node-0-1'},
    ],
  },
  {
    id: '1',
    text: 'node-1',
    children: [{id: '1-0', text: 'node-1-0'}, {id: '1-1', text: 'node-1-1'}],
  },
];

const myTree = new Tree('#container', {
  data: treeData,
});

const myTree = new Tree('#container', {
  url: '/api/treeJson',
  method: 'GET',

  values: ['1', '2', '3'],

  // only expand level 1 node
  closeDepth: 1,

  beforeLoad: function(rawData) {
    function formatData() {
      // do some format
    }
    return formatData(rawData);
  },

  loaded: function() {
    // do something or set values after Tree loaded callback
    // do not use arrow function `()=>` , if you use `this`, use function instead.
    // this context bind current tree instance
    this.values = ['0-1'];
  },

  onChange: function() {
    console.log(this.values);
  },
});

Properties

myTree.values

// get
const values = myTree.values;

// set
tree.values = ['0-1'];

myTree.selectedNodes

// get
const selectedNodes = myTree.selectedNodes;

myTree.disables

// get
const disables = myTree.disables;

// set
tree.disables = ['0-1'];

myTree.disabledNodes

// get
const disabledNodes = myTree.disabledNodes;

Events

License

MIT

Like @widgetjs/tree? just 🌟 star the project! Create issues if you find bug.