Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    jsfilerpublic

    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>).jsfiler(<options>);

    element - selector of the element containing the tree
    options - configuration parameters object

    For example:

    $('#treeId').jsfiler({menuMode: 3, mainMenu: '.menu'});

    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

    install

    npm i jsfiler

    Downloadsweekly downloads

    6

    version

    1.3.2

    license

    GPL v.3

    repository

    githubgithub

    last publish

    collaborators

    • avatar