{"id":13657852,"url":"https://github.com/m-thalmann/treejs","last_synced_at":"2025-05-02T23:31:21.046Z","repository":{"id":134973536,"uuid":"137672899","full_name":"m-thalmann/treejs","owner":"m-thalmann","description":"A simple JavaScript library, to display a TreeView like in the windows filebrowser","archived":false,"fork":false,"pushed_at":"2020-12-19T12:25:18.000Z","size":38,"stargazers_count":56,"open_issues_count":0,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-07T08:18:38.741Z","etag":null,"topics":["javascript","tree-structure","treeview","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://m-thalmann.github.io/treejs/demo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m-thalmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-17T17:23:32.000Z","updated_at":"2025-03-31T12:33:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"1d8b47d0-b3c7-4db6-aacf-cb106cfdb543","html_url":"https://github.com/m-thalmann/treejs","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thalmann%2Ftreejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thalmann%2Ftreejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thalmann%2Ftreejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thalmann%2Ftreejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m-thalmann","download_url":"https://codeload.github.com/m-thalmann/treejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252122254,"owners_count":21698305,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","tree-structure","treeview","vanilla-javascript"],"created_at":"2024-08-02T05:00:52.028Z","updated_at":"2025-05-02T23:31:20.722Z","avatar_url":"https://github.com/m-thalmann.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# TreeJS\n\nTreeJS is a simple JavaScript library, to display a TreeView like in the windows filebrowser.\nIt implements partially the Java Swing TreeModel etc.\n\n**Demo:** https://prod.thalmann.it/treejs/demo.html\n\n## Navigation\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n  - [TreeView](#treeview)\n  - [TreeNode](#treenode)\n  - [TreePath](#treepath)\n  - [TreeUtil](#treeutil)\n  - [TreeConfig](#treeconfig)\n  - [Events](#events)\n  - [Options](#options)\n- [Example](#example)\n\n## Installation\n1. Download the .zip-File and put it in your project-folder.\n\n2. Add this script-tag to the head of the file\n```html\n\u003cscript src=\"path/to/js/file.js\"\u003e\u003c/script\u003e\n```\n\n3. Add this link-tag to the head of the file, to include the styles\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/css/file.css\" /\u003e\n```\n\n4. Start using the library!\n\n## Usage\n### Create new TreeView\n```javascript\nvar root = new TreeNode(\"root\"); // Create the root-node\nvar tree = new TreeView(root);   // Create the tree\n```\n\n### Set a container to display the tree\n```javascript\ntree.setContainer(\"#container\"); // Uses document.querySelector\n```\nor\n```javascript\ntree.setContainer(document.getElementById(\"container\"));\n```\n\n### (Re-)load the tree\n```javascript\ntree.reload(); // Always use this, when you change the TreeView or any of its nodes\n```\n## Documentation\n### TreeView\nIt's the main object to display the Tree.\n#### Instanciating\n```javascript\nnew TreeView(root, container, options);\n```\n- **root** (TreeNode): The root-node of the tree.\n- **container** (DOM-Element/querySelector): The container for the tree to display **(optional)**\n- **options** (object): A object with options for the tree (see [below](#options)) **(optional)**\n\nAfter the instanciation, the TreeView is reloaded/rendered\n\n#### Methods\n```javascript\ntree.setRoot(root);                  // Resets the root-node (TreeNode)\ntree.getRoot();                      // Returns the root-node\n\ntree.expandAllNodes();               // Expands all nodes of the tree\ntree.expandPath(path);               // Expands all nodes that are in the path (TreePath)\ntree.collapseAllNodes();             // Collapses all nodes of the tree\n\ntree.setContainer(container);        // Resets the container (DOM-Element/querySelector)\ntree.getContainer();                 // Returns the container\n\ntree.setOptions(options);            // Resets the options (object)\ntree.changeOption(option, value);    // Changes one option (string, object)\ntree.getOptions();                   // Returns the options\n\ntree.getSelectedNodes();             // Returns all selected nodes in the tree\ntree.reload();                       // Reloads/Renders the tree inside of the container\n```\n\n### TreeNode\nIt represents a node inside of a tree. You can append children to it and specify a userobject, which is used to display text on a node. This object can be a string but can also be a other object, where the toString() function is used to display the text.\n#### Instanciating\n```javascript\nnew TreeNode(userobject, options);\n```\n\n- **userobject** (object): This object is used to display text on the node (if not string, toString() is used) **(optional)**\n- **options** (object): A object with options for the node (see [below](#options)) **(optional)**\n\n#### Methods\n```javascript\nnode.addChild(node);                 // Adds a child to the current node and sets the parent of the node (TreeNode)\nnode.removeChildPos(pos);            // Removes the child at this position (integer)\nnode.removeChild(node);              // Removes the child from the current node, if contained (TreeNode)\nnode.getChildren();                  // Returns a array with the children of the current node\nnode.getChildCount();                // Returns the number of children\nnode.getIndexOfChild(node);          // Returns the position of the child; -1 is returned if not found (TreeNode)\n\nnode.getRoot();                      // Tries to get the root node of this node\n\nnode.setUserObject(userobject);      // Resets the userobject (object)\nnode.getUserObject();                // Returns the userobject\n\nnode.setOptions(options);            // Resets the options (object)\nnode.changeOption(option, value);    // Changes one option (string, object)\nnode.getOptions();                   // Returns the options\n\nnode.isLeaf();                       // Returns true, if the node doesn't have any children, else false\n\nnode.setExpanded(true|false);        // Sets the expanded-state of the node (if it shows its children) (boolean)\nnode.toggleExpanded();               // Toggles the expanded-state of the node\nnode.isExpanded();                   // Returns, if the node is expanded or not\n\nnode.setEnabled(true|false);         // Sets the enabled-state of the node (if it is enabled) (boolean)\nnode.toggleEnabled();                // Toggles the enabled-state of the node\nnode.isEnabled();                    // Returns, if the node is enabled or not\n\nnode.setSelected(true|false);        // Sets the selected-state of the node (if it is selected) (boolean)\nnode.toggleSelected();               // Toggles the selected-state of the node\nnode.isSelected();                   // Returns, if the node is selected or not\n\nnode.open();                         // Triggers the \"open\"-event of the node\n\nnode.on(event, callback);            // Sets the eventlistener of the event, if the callback is specified;\n                                     // if only the event is set, it returns the callback-function; if that is not\n                                     // set, it returns a empty function (string, function)\nnode.getListener(event);             // Returns the callback-function for this event, if set (string)\n\nnode.equals(node);                   // Returns if the node is equal to the parameter (TreeNode)\n\nnode.toString();                     // Returns the generated string from the userobject\n```\n\n### TreePath\nIt represents a path inside of a tree (containing all nodes that form the path).\n#### Instanciating\n```javascript\nnew TreePath(root, node);\n```\n\n- **root** \u0026 **node** (TreeNode): if they are both set, the method setPath(root, node) is executed **(optional)**\n\n#### Methods\n```javascript\npath.setPath(root, node);            // Generates the path between root and node (TreeNode, TreeNode)\npath.getPath();                      // Returns the generated path as a array\n\npath.toString();                     // Returns the path as a string (nodes joined with a ' - ')\n```\n\n### TreeUtil\nA collection of default values and methods. Can't be instanciated.\n#### Variables\n```javascript\nTreeUtil.default_leaf_icon           // String, that represents the default icon for a leaf-node\nTreeUtil.default_parent_icon         // String, that represents the default icon for a normal node (with children)\nTreeUtil.default_open_icon           // String, that represents the default expanded-icon\nTreeUtil.default_close_icon          // String, that represents the default collapsed-icon\n```\n#### Methods\n```javascript\nTreeUtil.isDOM(object);              // Returns true, if the object is a DOM-Element, else false (object)\n\nTreeUtil.getProperty(opt, o, def);   // Returns the value of 'o' in the array/object opt, if it is set;\n                                     // else it returns def (object, string, object)\nTreeUtil.expandNode(node);           // Expands the node and all it's children and theirs etc. (TreeNode)\nTreeUtil.collapseNode(node);         // Collapses the node and all it's children and theirs etc. (TreeNode)\n\nTreeUtil.getSelectedNodesForNode(n); // Returns all selected nodes inside of this node (and it's self,\n                                     // if its selected) (TreeNode)\n```\n\n### TreeConfig\nA collection of values, that you can change (directly inside of the file or with JavaScript for only one site).\n#### Variables\n```javascript\nTreeConfig.leaf_icon                 // The icon for a leaf-node (default: TreeUtil.default_leaf_icon)\nTreeConfig.parent_icon               // The icon for a normal node (default: TreeUtil.default_parent_icon)\nTreeConfig.open_icon                 // The expanded-icon (default: TreeUtil.default_open_icon)\nTreeConfig.close_icon                // The collapsed-icon (default: TreeUtil.default_close_icon)\nTreeConfig.context_menu              // A function that is executed when a contextmenu is opened (default: undefined)\n```\n\n### Events\nIt is possible to attach a event to a TreeNode: ``node.on(event, callback);``\n\n| Event | Callback-Parameter(s) | Definition | Restriction |\n|-----------------|--------------------------------------|--------------------------------------------------------------------------|---------------|\n| click | e[click_event], node[TreeNode] | Is triggered when the node is clicked | - |\n| expand | node[TreeNode] | Is triggered when the node is expanded | Not-leaf only |\n| collapse | node[TreeNode] | Is triggered when the node is collapsed | Not-leaf only |\n| toggle_expanded | node[TreeNode] | Is triggered when the node is either expanded or collapsed | Not-leaf only |\n| open | node[TreeNode] | Is triggered when the open()-Function is executed or the leaf is clicked | Leaf only |\n| enable | node[TreeNode] | Is triggered when the node is enabled | - |\n| disable | node[TreeNode] | Is triggered when the node is disabled | - |\n| toggle_enabled | node[TreeNode] | Is triggered when the node is either enabled or disabled | - |\n| select | node[TreeNode] | Is triggered when the node is selected | - |\n| deselect | node[TreeNode] | Is triggered when the node is deselected | - |\n| toggle_selected | node[TreeNode] | Is triggered when the node is either selected or deselected | - |\n| contextmenu | e[contextmenu_event], node[TreeNode] | Is triggered when a contextmenu is opened on a node | - |\n\n### Options\n#### for TreeView\n\n| Option | Values | Definition |\n|-------------|----------|-----------------------------------------------------------------------------|\n| leaf_icon | [string] | Sets the leaf-icon for this tree to the string (can be overwritten by node) |\n| parent_icon | [string] | Sets the node-icon for this tree to the string (can be overwritten by node) |\n| show_root | [boolean] | Sets whether the root node is shown or not |\n\n#### for TreeNode\n\n| Option | Values | Definition |\n|----------------|------------|----------------------------------------------------------------|\n| expanded | [boolean] | On creation, the node will have the expanded value set to this |\n| enabled | [boolean] | On creation, the node will have the enabled value set to this |\n| selected | [boolean] | On creation, the node will have the selected value set to this |\n| icon | [string] | Sets the icon for this node to the string |\n| allowsChildren | [boolean] | Sets if there can be added new children to this node |\n| forceParent | [boolean] | This node will be displayed as parent, even if it is empty |\n\n## Example\n### Code:\n```javascript\nvar root = new TreeNode(\"root\");\n\t\t\tvar n1 = new TreeNode(\"1\");\n\t\t\t\tvar n11 = new TreeNode(\"1.1\");\n\t\t\tvar n2 = new TreeNode(\"2\");\n\t\t\tvar n3 = new TreeNode(\"3\");\n\t\t\t\tvar n31 = new TreeNode(\"3.1\");\n\t\t\t\tvar n32 = new TreeNode(\"3.2\");\n\t\t\t\t\tvar n321 = new TreeNode(\"3.2.1\");\n\t\t\t\tvar n33 = new TreeNode(\"3.3\");\n        \nroot.addChild(n1);\nroot.addChild(n2);\nroot.addChild(n3);\n\nn1.addChild(n11);\n\nn3.addChild(n31);\nn3.addChild(n32);\nn3.addChild(n33);\n\nn32.addChild(n321);\n\nn3.setEnabled(false);\n\nvar view = new TreeView(root, \"#container\");\n```\n\n### Output:\n\n![treeJs example](demo/example.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thalmann%2Ftreejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm-thalmann%2Ftreejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thalmann%2Ftreejs/lists"}