Dynamic jQuery File Tree Plugin – jsFiler
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.
div id="filetree"></div> |
JS
Activate the file tree plugin and pass the required options.
$(function() { $('#filetree').jsfiler({ menuMode: 1, iconPath: '', checkbox: false, canDrag: true, rootSingle: false, rootLeaf: true, rootParent: -1, saveState: false, selectOpen: 2, knotRemove: 0, nameDupl: 0, nameTrim: /^\s+|\s+$/g, nameValidate: false, userAuth: null, urlAjax: 'ajax.php' }); }); |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome plugin is developed by hareko. Visit their official github repository for more information and follow for future updates.