Are you looking for file tree plugin for your web based project to add,edit, delete file dynamically then this plugin is for you. It is A cross-browser jQuery plugin to display and modify the tree view of any hierarchical data (file directories, inventory lists, …) supplied from server-side. jsFiler is built on top of the jsTree extending its functionality: command menus, dialogues, server communication. It is configurable for different tree applications and expects the back-end support. The (multi)tree and operations behaviour are specified via configuration parameters and user callbacks.
Features:
- default/customized tree and command icons;
- tree behavior options;
- standard command set extensible by user commands;
- different command menu configurations;
- multi-tree handling;
- copy/move between the trees;
- make Ajax json requests;
- synchronize tree events and Ajax calls;
- tree event and request/response callbacks;
- node name validation;
- delete/replace confirmation;
- search options;
- multilingual support.
Libraries
Include the required jQuery library and jQuery jstree plugin’s files on page with jsFiler (CSS+JS) where you need to add file tree feature.
<link rel="stylesheet" href="/path/to/jstree/style.min.css"> <link rel="stylesheet" href="jsfiler.css"> <script src="/path/to/jstree/jquery.min.js">script> <script src="/path/to/jstree/jstree.min.js">script> <script src="jsfiler.js">script> |
HTML
Create simple container where you need to display file tree.
JS
Activate the file tree plugin and pass the required options.
$(function() { $('#filetree').jsfiler({ /* 1 - right-click menu, 2 - icon menu, 3 - both */ menuMode: 1, /* path to tree and menu icons */ iconPath: '', /* no tree checkboxes */ checkbox: false, /* allow drag & drop */ canDrag: true, /* allow multiple roots */ rootSingle: false, /* allow leafs for root node */ rootLeaf: true, /* root parent id */ rootParent: -1, /* save opened/selected state */ saveState: false, /* open the node on: 1 - click, 2 - dblclick, 3 - both 04.2017 */ selectOpen: 2, /* knots deletion: 0 - empty only, 1 - +copied, 2 - all */ knotRemove: 0, /* duplicate child names: 2 - allow, 1 - case-sensitive, 0 - no */ nameDupl: 0, /* name trim patterm (leading & trailing spaces */ nameTrim: /^\s+|\s+$/g, /* don't validate */ nameValidate: false, /* user authorization token */ userAuth: null, /* ajax request url */ urlAjax: 'ajax.php' }); }); |
See live demo and download source code.
This awesome plugin is developed by hareko. Visit their official github repository for more information and follow for future updates.