Pickle tree - Javascript tree component made with pure javascript

Related tags

React pickle_tree
Overview

Pickle Tree

Pickle tree is a tree component written as completely pure javascript. Just send json file to object and have fun :-D

Pickle tree does't need anything except you !

Badges Falan

  • Simple javascript ability
  • Simple css ability for some style editing for your project

Initiation And Using Example

Demo Page : http://tree.picklecan.me/

Initiate like this :

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) => {
            //retuns node with new parent and old parent in 'old_parent' key!!
            console.log(node);
        },
        nodeRemoveCallback:(node)=>{
            //returns removed node
            console.log(node);
        },
        c_config: {
            //start as folded or unfolded
            foldedStatus: false,
            //for logging
            logMode: false,
            //for switch element
            switchMode: true,
            //for automaticly select childs
            autoChild :true,
            //for automaticly select parents
            autoParent : true,
            //for drag / drop
            drag: true
        },
        c_data: [{
            n_id: 1,
            n_title: 'falan1',
            n_parentid: 0,
            n_checkStatus: true,
            n_elements : [{
                icon:'fa fa-edit',
                title:'Edit',
                //context button click event
                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: 'falan2',
            n_parentid: 0
        }, {
            n_id: 3,
            n_title: 'falan3',
            n_parentid: 0
        }, {
            n_id: 4,
            n_title: 'falan1-1',
            n_parentid: 1
        }, {
            n_id: 5,
            n_title: 'falan1-2',
            n_parentid: 1
        }, {
            n_id: 10,
            n_title: 'falan1-2-1',
            n_parentid: 5
        }]
    });

After that you can use some addional events for node like those:

    //for getting node from it's id :
    let our_node = tree.getNode('5');

    //for deleting node
    our_node.deleteNode();

    //for toggling
    our_node.toggleNode();
    
    //for toggle on all parents and find location of node
    our_node.showFamily();

    //for getting it's childs
    our_node.getChilds();

    //for check / uncheck node
    our_node.toggleCheck(true / false);
    
    //for getting all checked (selected) nodes
    tree.getSelected();
    
    //for deselecting all checked (selected) nodes
    tree.resetSelected();

    //update node
    our_node.title = 'A new title for my node ';
    our_node.updateNode();

    // for creating new  node manualy
    let new_node = tree.createNode({
        n_value: 5,
        n_title: 'falan gibi 5',
        n_id: 5,
        n_elements: [],
        n_parent: tree.getNode(4),
        n_checkStatus: false
    });
    
    //destroy tree
    tree.destroy();

Installation

  • Just include js and css file to your project then you can use it

Clone

  • Clone this repo to your local machine using https://github.com/freakazoid41/pickle_tree.git
You might also like...

Markdown component for React

react-markdown Markdown component for React using remark. Learn markdown here and check out the demo here. Install npm: npm install react-markdown Why

Jan 4, 2023

React draggable component

React draggable component

React-Draggable A simple component for making elements draggable. Draggable divI can now be moved around!/div /Draggable Demo Changelog Vers

Jan 4, 2023

A React Component library implementing the Base design language

A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

Dec 29, 2022

Accessible modal dialog component for React

react-modal Accessible modal dialog component for React.JS Table of Contents Installation API documentation Examples Demos Installation To install, yo

Jan 1, 2023

A small component based app library composing user interfaces and apps.

A small component based app library composing user interfaces and apps.

See https://vibejs.com for ongoing documentation and info. VibeJS A small component based JavaScript library to build user interfaces and apps. If you

Nov 16, 2022

A Vue.js popover component based on PopperJS

vue3-popper A popover component for Vue 3 Documentation Check out the documentation Getting started Usage Install NPM npm install vue3-popper Yarn yar

Dec 30, 2022

Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

React Table + Tailwind CSS = ❤️ Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS. Both parts

Jan 7, 2023

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Slinkity 🚧 This project is heavily under construction! 🚧 As excited as you may be, we don't recommend this early alpha for production use. Still, gi

Dec 27, 2022

A headless React component that lets you control how visible and overflown items are rendered 👀

A headless React component that lets you control how visible and overflown items are rendered 👀

react-overflow-list A hooks based implementation of the OverflowList component from Blueprint JS. Installation yarn add react-overflow-list Basic Usa

May 31, 2022
Comments
  • 2 Enhancements

    2 Enhancements

    Two enhancements

    1. myNode.find(text) which returns a node which has a title containing text
    2. myNode.scroll() which scrolls the selected node into focus
    opened by markstuartwalker 1
  • Load data from Ajax

    Load data from Ajax

    Hi,

    is it possible to load the data from ajax? I am trying this but it doesn't work for me.

        function GetNodos() {
            $.ajax({
                type: 'GET',
                url: '/Carta/GetFamiliasV2/' + '@Model.idcarta',
                dataType: 'json',
                contextType: "application/json",
                traditional: true
            }).done(function (datos) {
                var nodos = JSON.stringify(datos);
                for (var i = 0; i < nodos.length; i += 1) {
                    let new_node = arbol_familias.createNode(nodos[i]);
                }
            }).fail(function () {
                swal("Error!", "Error al consultar las familias", "warning");
            });
        }
    
    opened by franlopezraris 1
  • Possible to add HTML elements?

    Possible to add HTML elements?

    Hi, at a glance this looks really nice, especially given the small size!

    I was wondering if it supports adding arbitrary HTML in addition to the text label? In particular, I'd like to add form elements to each tree node.

    enhancement 
    opened by cocowalla 1
Owner
Kadir Barış Bozat
Software Developer
Kadir Barış Bozat
Webpack plugin to tree-shake and minify JSON modules

webpack-json-access-optimizer Optimize JSON modules that are referenced via accessor function. For example, i18n locale JSONs. Features Tree shaking R

hiroki osame 33 Oct 23, 2022
null 136 Dec 30, 2022
JavaScript UI Component Library

Fancyapps UI Collection of task-oriented components that will make you more productive. Packed full of features that you and your clients will love. F

Jānis Skarnelis 326 Dec 24, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
The Select Component for React.js

React-Select The Select control for React. Initially built for use in KeystoneJS. See react-select.com for live demos and comprehensive docs. React Se

Jed Watson 25.6k Jan 3, 2023
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Jamie Kyle 16.5k Jan 3, 2023
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Danilo Woznica 12.7k Jan 4, 2023
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.6k Jan 5, 2023