Ajax Folder Tree View In jQuery – jsFiler Plugin

File Size:48.18 KB
Views Total:619
Last Update:April 5, 2018
Publish Date:December 1, 2017
Official Website:Go to website
License:MIT

jsFiler is AN AJAX-enabled jQuery file/folder tree plugin, that enables the user to display/edit hierarchical knowledgeduring a folder structure almost like the file mortal. offered operations: add, remove, edit, search, copy, cut, paste, delete, etc.

How to use it:

  1. Include the necessary jQuery library:
    <link rel="stylesheet" href="/path/to/jstree/style.min.css">
    <script src="/path/to/jstree/jquery.min.js"></script>
    <script src="/path/to/jstree/jstree.min.js"></script>
  2.  Include the jsFiler plugin’s :
    <link rel="stylesheet" href="jsfiler.css">
    <script src="jsfiler.js"></script>
  3.  Create a container for the file tree:
    <div id="filer-demo"></div>
  4. Default configuration options:
    $('#filer-demo').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="http://www.jqueryshare.net/">date</a> */
      nameValidate: false, 
    
      /* user authorization token */
      userAuth: null, 
    
      /* ajax request url */
      urlAjax: 'ajax.php' 
      
    });

    Done 🙂

Change Log

14 Apr 2017

  • selectOpen option, default 2