Skip to content
/ treejs Public

A lightweight tree widget, compatible with VanillaJS / React / Vue. Tiny size after gzip. Zero dependence.

License

Notifications You must be signed in to change notification settings

daweilv/treejs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

67 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

@widgetjs/tree

Version Downloads Total Downloads Monthly gzip size gzip size

A lightweight flexible tree widget.

Features

  • πŸš€ Compatible with VanillaJS / React / Vue
  • βœ‚οΈ Tiny size after gzip
  • 🎊 Zero dependence
  • πŸŽ‰ Events supported

Demo

Online Demo

demo.gif

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": [],
  "checked": true
}
Name Type Description Required
id any unique id Required
text string tree node label Required
attributes object custom attributes of the node Optional
children array children of current node Optional
checked boolean whether the node is selected or not Optional

Example

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

Parameters

Name Type Description
url string a URL to retrieve remote data,or use data
method string http method(GET/POST), default 'GET'
data array the json tree data
values array ids which you want to check
closeDepth integer expand level
beforeLoad function invoke before the tree load data. Format raw data in this function.
loaded function invoke after the tree load data
onChange function invoke when the node status change

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

Property Type Operation Description
values array get/set selected values.
selectedNodes array get selected nodes data with attributes.
disables array get/set get disabled values, or set disable nodes.
disabledNodes array get disabled nodes data with attributes.

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

Event Parameters Description
beforeLoad current data invoke before the tree load data
loaded null invoke after the tree load data
onChange null invoke when the node status change

Methods

Method Parameters Description
expandAll null expand all tree nodes
collapseAll null collapse all tree nodes

License

MIT


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

About

A lightweight tree widget, compatible with VanillaJS / React / Vue. Tiny size after gzip. Zero dependence.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published