Dynamic jQuery File Tree Plugin – jsFiler

by Posted on

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({
 
  /* 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 vali<a href="https://www.jqueryscript.net/time-clock/">date</a> */
  nameValidate: false, 
 
  /* user authorization token */
  userAuth: null, 
 
  /* ajax request url */
  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.


Published by admin