Collapsible Sortable Toggleable Data Tree In JavaScript – Pickle Tree

Category: Javascript | October 2, 2020
Author: freakazoid41
Views Total: 478 views
Official Page: Go to website
Last Update: October 2, 2020
License: GPL-3.0

Preview:

Collapsible Sortable Toggleable Data Tree In JavaScript – Pickle Tree

Description:

Pickle Tree is a JavaScript tree view plugin to render a collapsible, sortable (draggable) multi-level tree view from hierarchical data, with iOS-style switches that allow the user to toggle on/off the nodes.

How to use it:

1. Insert the stylesheet pickletree.css and JavaScript pickletree.js into the document.

<link rel="stylesheet" href="src/pickletree.css" />
<script src="src/pickletree.js"></script>

2. By default, the Pickle Tree uses Font Awesome for expand/collapse/menu icons.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

3. Create a container to hold the tree.

<div id="div_tree"></div>

4. The example data for the tree.

const myData = [{
      n_id: 1,
      n_title: 'Item 1',
      n_parentid: 0,
      n_checked: true,
      n_elements: [{
        icon: 'fa fa-edit', // icon class
        title: 'Edit',
        onClick: (node) => {
          console.log('edit - ' + node.id);
        }
      }, {
        icon: 'fa fa-trash',
        title: 'Delete',
        onClick: (node) => {
          console.log('delete - ' + node.id);
        }
      }],
      }, {
      n_id: 2,
      n_title: 'Item 2',
      n_parentid: 0
      }, {
      n_id: 3,
      n_title: 'Item 3',
      n_parentid: 0
      }, {
      n_id: 4,
      n_title: 'Item 1-1',
      n_parentid: 1
      }, {
      n_id: 5,
      n_title: 'Item 1-2',
      n_parentid: 1
      }, {
      n_id: 10,
      n_title: 'Item 1-2-1',
      n_parentid: 5
      }, {
      n_id: 11,
      n_title: 'Item 1-2-1-1',
      n_parentid: 10
      }, {
      n_id: 6,
      n_title: 'Item 2-1',
      n_parentid: 2
      }, {
      n_id: 7,
      n_title: 'Item 2-2',
      n_parentid: 2
      }, {
      n_id: 8,
      n_title: 'Item 2-3',
      n_parentid: 2
      }, {
      n_id: 9,
      n_title: 'Item 1-2-2',
      n_parentid: 5
}]

5. Render a tree view inside the container element you just created.

const tree = new PickleTree({
      c_target: 'div_tree',
      c_config: {
        // options here
      },
      c_data: myData
});

6. Possible options to customize the tree.

const tree = new PickleTree({
      c_target: 'div_tree',
      c_config: {
        // logs open/close
        logMode: false,

        // enables switches
        switchMode: false,

        // auto selects parent & child nodes
        autoChild: true,
        autoParent: true,

        // custom fold icon
        foldedIcon: 'fa fa-plus',

        //unfold icon
        unFoldedIcon: 'fa fa-minus',

        // menu icon
        menuIcon: ['fa', 'fa-list-ul'],

        // collapse all nodes on page load
        foldedStatus: false,

        // enables sortable via drag and drop
        drag: false
      },
      c_data: myData
});

7. Callback functions.

const tree = new PickleTree({
      c_target: 'div_tree',
      rowCreateCallback: (node) => {
        //console.log(node)
      },
      switchCallback: (node) => {
        //console.log(node)
      },
      drawCallback: () => {
        //console.log('tree drawed ..');
      },
      dragCallback: (node) => {
        console.log(node);
      },
      dropCallback: (node) => {
        console.log(node);
      },
      c_data: myData
});

8. API methods.

// get node
let myNode = tree.getNode('5');

// delete a node
myNode.deleteNode();

// toggle a node
myNode.toggleNode();

// get child nodes
myNode.getChilds();

// check / uncheck a node
myNode.toggleCheck(true / false);

// update a node
myNode.title = 'A new title for my node ';
old_node.updateNode();

// create a new node
let new_node = tree.createNode({
  n_value: 5,
  n_title: 'Item 5',
  n_id: 5,
  n_elements: [],
  n_parent: tree.getNode(4),
  n_checkStatus: false
});

Changelog:

10/02/2020

  • css fix for 1 optioned context menu

09/18/2020

  • css fix for switch elements

07/23/2020

  • Fixed dragging is not working on chrome

07/22/2020

  • JS update

07/20/2020

  • CSS update

07/18/2020

  • bugfix

07/17/2020

  • huge bugfix about menu

06/27/2020

  • Some little fix about removing node

06/22/2020

  • Menu class fix

06/20/2020

  • check for preventing build location crossing

06/11/2020

  • Bug fix

06/10/2020

  • Fixed: Parent node dragging to child node

04/29/2020

  • fix on outside drop

04/28/2020

  • Update pickletree.css

You Might Be Interested In:


One thought on “Collapsible Sortable Toggleable Data Tree In JavaScript – Pickle Tree

  1. Kadir Bozat

    It’s very nice component , i’m using my all projects and i really like it

    Reply

Leave a Reply