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.
jquery-tree-plugin



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.