JS Filer: Display and manipulate a HTML treeview control

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2023-10-28 (9 months ago) RSS 2.0 feedNot enough user ratingsTotal: 172 All time: 302 This week: 4Up
Version License JavaScript version Categories
js-filer 1.3.6GNU Free Document...5HTML, AJAX, jQuery, Files and Folders
Description 

Author

This is a jQuery plugin that can display and manipulate a HTML treeview control of hierarchical data.

It can render a hierarchical list of nested nodes inside a given page element and provides command menu to alter those nodes.

Currently it can add, rename, remove, search, copy and move treeview nodes and leaf elements.

Manipulate actions can be synchronized with the server data using AJAX requests.

Innovation Award
JavaScript Programming Innovation award nominee
October 2016
Number 4


Prize: One year server license IP to country, region, city, latitude, longitude, ZIP code, time zone, area code database
Treeviews are very useful to display and manipulate data structures that are organized in a hierarchy, like for instance files and folders.

This jQuery plugin provides a means to let the user perform several tree element manipulation operations like adding, renaming, removing, searching, copying and moving treeview nodes and leaf elements.

Manuel Lemos
Picture of Vallo Reima
  Performance   Level  
Name: Vallo Reima <contact>
Classes: 6 packages by
Country: Estonia Estonia
Age: ???
All time rank: 351 in Estonia Estonia
Week rank: 6 Up1 in Estonia Estonia Equal
Innovation award
Innovation award
Nominee: 4x

Winner: 1x

Example

<!-- * jsFiler demo * * URL parameters: * mode -- r - right-click menu * m - main menu * n - node menu * Requires: ajax.php emulator * @package jsFiler * @author Vallo Reima * @copyright (c) 2016,2017 --> <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="jsFiler" name="generator"> <title>jsFiler</title> <link type="image/x-icon" rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" /> <link media="all" type="text/css" rel="stylesheet" href="jsfiler.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script> <script src="jsfiler.min.js" type="text/javascript"></script> <style type="text/css"> body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 100.01%; margin: 5px; } .shell{ width:100%; border:0px solid #000000; } .shell a, shell a:link, shell a:visited, shell td a, shell td a:link, shell td a:visited { text-decoration:none; color:#666666; } .shell a:hover{ text-decoration:none; color:#000000; } .head { border-bottom:1px solid #A0A0A0; font-size:14px; height:27px; } .menu{ margin-left:10px; padding-top:5px; float:left; } .menu a { margin-left: 5px; } .sign{ float:right; margin-right: 20px; } .content { clear: both; margin-right:50px; padding:20px 20px 20px 20px; font-size: 12px; } </style> <script type="text/javascript"> $(document).ready(function() { /** * set menu type * @param {string} key name * @return {object} */ var Menu = function(key) { var p = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); //get URL parameter p = p && p[1] ? p[1] : 'rm'; var m = 0; if (p.indexOf('r') + 1) { m += 1; } if (p.indexOf('m') + 1 || p.indexOf('n') + 1) { m += 2; } var r = {mode: m}; r.main = (p.indexOf('m') === -1) ? '' : '.menu';//displaying no/classname return r; }; var menu = Menu('mode'); //get menu type /* create the tree */ $('#filer_0').jsfiler({menuMode: menu.mode, mainMenu: menu.main, checkBox: 0}); //activate $('#filer_0').jsfiler({knotRemove: 2});//adjust deletion mode }); </script> </head> <body> <div class="shell"> <div class="head"> <div class="menu"><noscript>JavaScript is disabled. Please enable and reload the page</noscript></div> <div class="sign">jsFiler Plugin Demo &nbsp;&copy; 2016 <a href="mailto:info@vregistry.com?subject=jsFiler">vRegistry</a></div> </div> <div class="content"> <div id="filer_0"></div> </div> </div> </body> </html>

Details

jsFiler npm version

Purpose

A cross-browser jQuery plugin to display and modify the tree view of any hierarchical data (file directories, inventory lists, ...) supplied from server-side.

Composition

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.

Creation

Examine the demo for the details (see Installation):

  1. supply necessary CSS/JS assets;
  2. supply html/css with the elements to hold the tree;
  3. activate the tree via jQuery passing the tree parameters:

    
    element - selector of the element containing the tree</br>
    options - configuration parameters object
    
    For example:
    
    

Configuration

The options can be passed during activation and after that.

  • menuMode - the command menu: 1 - right-click menu, 2 - icon menu, 3 - both (integer, default is 1)
  • mainMenu - icon menu element selector (string, default is '' placing behind the current node)
  • iconPath - user path to tree and menu icons (string, default is '' using own css)
  • checkBox - node checkboxes: 0 - no, 1 - yes, 2 - cascading (integer, default is 0)
  • canDrag - allow drag'n drop (boolean, default is true)
  • rootSingle - allow multiple roots (boolean, default is false)
  • rootLeaf - allow leafs for root node (boolean, default is true)
  • saveState - save opened/selected state (boolean, default is false)
  • selectOpen - open the subtree by node selection (0 - don't, 1 - by click, 2 - by dblclick; default is 2)
  • knotRemove - knots deletion: 0 - empty only, 1 - +copied, 2 - all (integer, default is 0)
  • nameDupl - duplicate child names: 2 - allow, 1 - case-sensitive, 0 - no (integer, default is 0)
  • nameTrim - node name trim pattern (string, default is /^\s+|\s+$/g)
  • nameValidate - node name validation pattern (string, default is false; Windows-like: /^[^\\\/?%*:|'\"<>]+$/)
  • urlAjax - ajax request url (string, default is ajax.php)
  • userAuth - user authorization token (string, default is null)

Operation

The tree has 3 types of the nodes: root, folder, file. Click the pointer before the tree node icon to open/close the sub-nodes. Click the node and select the required command from the right-click or icon menu. Use drag'n drop to move/copy the nodes.

Installation

Unzip the files to some web server directory:

  1. jsfiler.js - the plugin
  2. jsfiler.css - plugin styles/icons
  3. icons - tree & command icons folder
  4. demo.html - the demo
  5. ajax.php - server-side emulator for the demo
  6. readme.md - quick overview

PHP support is required to run the demo.html. Use the mode parameter to try different menu modes (mode=rm is default):

  • r - right-click menu
  • m - main menu
  • n - node menu

The demo must function like [here].

Revision Credits

[Ivan Bozhanov] of jsTree

License

jsFiler is released under the [GPL v.3].

(c) 2015 Vallo Reima

Feedback

Examine the [Remote File Manager] solution that implements jsFiler via extended command set, enhanced dialog and callbacks.

If you have any questions, comments, ideas, or would like to leave any other kind of feedback, feel free to [contact me].

ChangeLog

  • Apr 2017 - selectOpen option, default 2
  • Feb 2018 - checkBox option, values 0|1|2

[here]: http://vregistry.com/samples/demo/?app=jsfiler [Ivan Bozhanov]: http://vakata.com/en/ [jsTree]: https://www.jstree.com/ [GPL v.3]: https://www.gnu.org/licenses/gpl-3.0.html [contact me]: mailto:vallo@vregistry.com?subject=jsFiler [Remote File Manager]: http://vregistry.com/filer/


  Files folder image Files (31)  
File Role Description
Files folder imageicons (21 files)
Accessible without login Plain text file ajax.php Data Auxiliary data
Accessible without login Plain text file demo.html Example Example
Accessible without login Image file favicon.ico Data Auxiliary data
Accessible without login Plain text file jsfiler.css Data Auxiliary data
Plain text file jsfiler.js Class Class source
Accessible without login Plain text file jsfiler.min.css Data Auxiliary data
Plain text file jsfiler.min.js Class Class source
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files (31)  /  icons  
File Role Description
  Accessible without login Image file c_ad.png Icon Icon image
  Accessible without login Image file c_add-no.png Icon Icon image
  Accessible without login Image file c_add.png Icon Icon image
  Accessible without login Image file c_cpy-no.png Icon Icon image
  Accessible without login Image file c_cpy.png Icon Icon image
  Accessible without login Image file c_cut-no.png Icon Icon image
  Accessible without login Image file c_cut.png Icon Icon image
  Accessible without login Image file c_del-no.png Icon Icon image
  Accessible without login Image file c_del.png Icon Icon image
  Accessible without login Image file c_new-no.png Icon Icon image
  Accessible without login Image file c_new.png Icon Icon image
  Accessible without login Image file c_pst-no.png Icon Icon image
  Accessible without login Image file c_pst.png Icon Icon image
  Accessible without login Image file c_ren-no.png Icon Icon image
  Accessible without login Image file c_ren.png Icon Icon image
  Accessible without login Image file c_sch-no.png Icon Icon image
  Accessible without login Image file c_sch.png Icon Icon image
  Accessible without login Image file t_knot.png Icon Icon image
  Accessible without login Image file t_knot_leaf.png Icon Icon image
  Accessible without login Image file t_leaf.png Icon Icon image
  Accessible without login Image file t_root.png Icon Icon image

 Version Control Unique User Downloads Download Rankings  
 100%
Total:172
This week:0
All time:302
This week:4Up