All Projects → scalia → Vuejs Tree

scalia / Vuejs Tree

Licence: mit
A highly customizable and blazing fast Vue tree component ⚡🌲

Projects that are alternatives of or similar to Vuejs Tree

Liquor Tree
Tree component based on Vue.js
Stars: ✭ 348 (+64.93%)
Mutual labels:  tree, component, treeview
Ngx Treeview
An Angular treeview component with checkbox
Stars: ✭ 312 (+47.87%)
Mutual labels:  tree, component, treeview
Gijgo
Gijgo - Free Javascript Controls
Stars: ✭ 424 (+100.95%)
Mutual labels:  tree, treeview
Bosket
Collection of tree view components for front-end frameworks. 🌳
Stars: ✭ 457 (+116.59%)
Mutual labels:  tree, treeview
Ngx Ui
🚀 Style and Component Library for Angular
Stars: ✭ 534 (+153.08%)
Mutual labels:  tree, component
React Virtualized Tree
A virtualized tree view component making use of react
Stars: ✭ 328 (+55.45%)
Mutual labels:  tree, component
Ng2 Tree
Angular tree component
Stars: ✭ 350 (+65.88%)
Mutual labels:  tree, treeview
React Checkbox Tree
A simple and elegant checkbox tree for React.
Stars: ✭ 477 (+126.07%)
Mutual labels:  tree, treeview
select2-to-tree
Select2-to-Tree extends Select2 to support arbitrary level of nesting...
Stars: ✭ 71 (-66.35%)
Mutual labels:  tree, treeview
Bootstraptable Treeview
bootstrapTable extension of treeView
Stars: ✭ 57 (-72.99%)
Mutual labels:  tree, treeview
Angular Tree Component
A simple yet powerful tree component for Angular (>=2)
Stars: ✭ 1,031 (+388.63%)
Mutual labels:  tree, treeview
Vue Finder
📁 A Vue.js component to display hierarchical data (like the MacOS X finder)
Stars: ✭ 87 (-58.77%)
Mutual labels:  tree, treeview
Graphview
Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.
Stars: ✭ 152 (-27.96%)
Mutual labels:  tree, treeview
React Sortable Tree
Drag-and-drop sortable component for nested data and hierarchies
Stars: ✭ 4,348 (+1960.66%)
Mutual labels:  tree, component
Thinkmap
Draw a tree in Android。在 Android 上绘制思维导图控件,让思维更简单。
Stars: ✭ 285 (+35.07%)
Mutual labels:  tree, treeview
Vue Jstree
A Tree Plugin For Vue2.0+
Stars: ✭ 469 (+122.27%)
Mutual labels:  tree, treeview
react-treefold
A renderless tree component for your hierarchical React views
Stars: ✭ 37 (-82.46%)
Mutual labels:  tree, treeview
react-native-nested-listview
A UI component for React Native for representing nested arrays of N levels
Stars: ✭ 163 (-22.75%)
Mutual labels:  tree, treeview
Vue.d3.tree
Vue component to display tree based on D3.js layout.
Stars: ✭ 726 (+244.08%)
Mutual labels:  tree, component
Wmztreeview
类似前端elementUI的树形控件,可自定义节点内容,支持无限极节点,可拖拽增删节点等等,非递归实现
Stars: ✭ 118 (-44.08%)
Mutual labels:  tree, treeview

VueJS Tree

npm version

A highly customizable vuejs tree viewer

tree

Example

codesandbox

Getting Started

Install

You can install using yarn:

$ yarn add vuejs-tree

or with npm:

$ npm install vuejs-tree

Usage

Add the following lines at the top of your .js file which contains your Vue instance.

  import Tree from 'vuejs-tree'


  // in your vue instance
  components: {
    'Tree': Tree
  },

Then add the following line in your html file to generate a tree. You can have as many trees per page as you want.

  <Tree id="my-tree-id" ref="my-tree-ref" :custom-options="myCustomOptions" :custom-styles="myCustomStyles" :nodes="treeDisplayData"></Tree>

Data Structure

You need to define data to display which is a nested array of hash.

Example:

data: {
  treeDisplayData: [
    {
      text: 'Root 1',
      nodes: [
        {
          text: 'Child 1',
          nodes: [
            {
              text: 'Grandchild 1'
            },
            {
              text: 'Grandchild 2'
            }
          ]
        },
        {
          text: 'Child 2'
        }
      ]
    },
    {
      text: 'Root 2'
    }
  ]
}

Node properties

Here is a fully customized node:

{
  id: 1,
  text: 'Root 1',
  definition: 'First node',
  depth: 1,
  checkable: false,
  selectable: false,
  expandable: true,
  tags: [42],
  state: {
    checked: false,
    expanded: false,
    selected: false
  },
  nodes: [
    {},
    ...
  ]
}

The Following properties define a node level css and behavior.

key type Detail
id String or Integer --> Mandatory Used in the tree to differentiate each node
text String --> Mandatory The text value displayed at the right of the node icons
definition String --> Optional If some text is given, then it will show as a tooltip
depth Integer --> Optional It corresponds to the node depth, starting from 0, 1 or anything. It's advisable to fill these fields if some of your nodes have the same id
tags [Integer] --> Optional The tag is displayed at the right end of the line
checkable Boolean --> Optional, default: true Used to enable or disable the node's check event
selectable Boolean --> Optional, default: true Used to enable or disable the node's select event
expandable Boolean --> Optional, default: true Used to enable or disable the node's expand event
state nodes's state
state.checked Boolean --> Optional, default: false Change the node's default state (at initialize)
state.selected Boolean --> Optional, default: false Change the node's default state (at initialize)
state.expanded Boolean --> Optional, default: false Change the node's default state (at initialize)
nodes Object --> Optional Used to display the node's children. Look above for a structure example

Options / Styles

Here is an example of a customOptions hash the tree can take. I suggest you to use a vuejs computed function if you want to use a function pointer.

computed: {
  myCustomStyles() {
    return {
      tree: {
        height: 'auto',
        maxHeight: '300px',
        overflowY: 'visible',
        display: 'inline-block'
      },
      row: {
        width: '500px',
        cursor: 'pointer',
        child: {
          height: '35px'
        }
      },
      addNode: {
        class: 'custom_class',
        style: {
          color: '#007AD5'
        }
      },
      editNode: {
        class: 'custom_class',
        style: {
          color: '#007AD5'
        }
      },
      deleteNode: {
        class: 'custom_class',
        style: {
          color: '#EE5F5B'
        }
      },
      selectIcon: {
        class: 'custom_class',
        style: {
          color: '#007AD5'
        },
        active: {
          class: 'custom_class',
          style: {
            color: '#2ECC71'
          }
        }
      },
      text: {
        style: {},
        active: {
          style: {
            'font-weight': 'bold',
            color: '#2ECC71'
          }
        }
      }
    };
  },
  myCustomOptions() {
    return {
      treeEvents: {
        expanded: {
          state: true,
          fn: null,
        },
        collapsed: {
          state: false,
          fn: null,
        },
        selected: {
          state: false,
          fn: null,
        },
        checked: {
          state: true,
          fn: this.myCheckedFunction,
        }
      },
      events: {
        expanded: {
          state: true,
          fn: null,
        },
        selected: {
          state: false,
          fn: null,
        },
        checked: {
          state: false,
          fn: null,
        },
        editableName: {
          state: false,
          fn: null,
          calledEvent: null,
        }
      },
      addNode: { state: false, fn: null, appearOnHover: false },
      editNode: { state: true, fn: null, appearOnHover: true },
      deleteNode: { state: true, fn: null, appearOnHover: true },
      showTags: true,
    };
  }
},

Styles

Option name Detail
tree Object - override default tree css
row Object - override default tree node css
row.child Object - override style of <div> into the <li> row (e.g. you can manage the height of the row)
expanded Object - contains the class of the expanded icon
addNode Object - contains the class and the style of the addNode button
editNode Object - contains the class and the style of the editNode button
deleteNode Object - contains the class and the style of the deleteNode button
selectIcon Object - contains the class and the style for the select node icon
text Object - contains the class and the style for the node's text

Options

Tree options
Option name Detail
treeEvents Object - contains the callback tree events, called after the tree row events
treeEvents.expanded Object - enable or disable the callback when a node is expanded. If enabled, fn (function pointer) must be present.
treeEvents.collapsed Object - enable or disable the callback when a node is collasped. If enabled, fn (function pointer) must be present.
treeEvents.selected Object - enable or disable the callback when a node is selected. If enabled, fn (function pointer) must be present.
treeEvents.checked Object - enable or disable the callback when a node is checked. If enabled, fn (function pointer) must be present.
Row Options
Option name Detail
showTags Boolean - Show the node's tag if given
addNode Object - enable or disable the add node button. If enabled, fn must be present. If appearOnHover is true, the button will appear only if the row is hovered
editNode Object - enable or disable the edit node button. If enabled, fn must be present. If appearOnHover is true, the button will appear only if the row is hovered
deleteNode Object - enable or disable the delete node button. If enabled, fn must be present. If appearOnHover is true, the button will appear only if the row is hovered
events Object - contains the node events, override the tree row events behavior
events.expanded Object - enable or disable the expanded node event. The fn key is optional, if present, it will replace the native behavior
events.selected Object - enable or disable the selected node event. The fn key is optional, if present, it will replace the native behavior
events.checked Object - enable or disable the checked node event. The fn key is optional, if present, it will replace the native behavior
events.editableName Object - enable or disable the event when the node's name is clicked. If enabled, the key fn or calledEvent must be present. calledEvent is a string and it value must be an existing event (e.g. 'selected')

Events

Tree

You can call your own function here by assigning a function pointer in the tree options and changing its state to true. These functions are called after all tree modifications.

onNodeSelected

Called when a node is selected. myCustomOptions.treeEvents.selected.fn

onNodeExpanded

Called when a node is expanded. myCustomOptions.treeEvents.expanded.fn

Or called when a node is collapsed. myCustomOptions.treeEvents.collapsed.fn

onNodeChecked

Called when a node is collapsed. myCustomOptions.treeEvents.checked.fn

Tree row

You can call your own function here by assigning a function pointer in the tree options. It will replace the existing behavior of the tree for this event. You can also disabled an event by changing it's state to false.

toggleSelected

Called when a node is selected. myCustomOptions.events.selected.fn

toggleExpanded

Called when a node is expanded or collapsed. myCustomOptions.events.expanded.fn

toggleChecked

Called when a node is checked. myCustomOptions.events.checked.fn

editableName

You can call a special function if you assign it's pointer in myCustomOptions.events.editableName.fn Or you can call an existing event by assigining it's name in myCustomOptions.events.editableName.calledEvent

example : myCustomOptions.events.editableName.calledEvent = 'selected'

Methods

Methods Params:

depth --> Optional but help distinguish nodes with the same id.

argWanted --> It can either be a node attribute name (string) or a array of node attribute name (like ['id', 'name']).

format --> If you want the function to return an plain array (false) or a hash tree (true).

maxDepth --> The function will only access nodes within the maxDepth.

fullNode --> Return only node ids or node objects.

conditions --> It's used to affect only the nodes which match it. For example if the condition is {checked: true}, the function will affect only the nodes which are checked. You can use all nodes attribute that are present in the node object.

Function Detail
checkNode(nodeId, depth) Check a node
uncheckNode(nodeId, depth) Uncheck a node
getSelectedNode() Return the selected node if you have selected a node
getCheckedNodes(argWanted, format = false) Return all checked nodes
getExpandedNodes(argWanted, format = false) Return all expanded nodes
checkAllNodes() Check all nodes
uncheckAllNodes() Uncheck all nodes
expandNode(nodeId, depth) Expand a node
collapseNode(nodeId, depth) Collapse a node
selectNode(nodeId, depth) Select a node and deselect the previously selected node if it exists
expandAllNodes() Expand all nodes
collapseAllNodes() Collapse all nodes
deselectAllNodes() Deselect all nodes
findNode(nodeId, maxDepth = 9999) Find and return a node
getVisibleNodes(fullNode = false) Get all visible nodes
getNodesData(argWanted, conditions = {}, format = false) Customizable function that returns nodes

Get the tree instance

If you want to call any tree method, you need to get the instance.

To get the tree instance you just need to be in the vue instance and use this.$refs['my-tree-ref'] Then you can use a method like that: this.$refs['my-tree-ref'].myMethod()

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].