“FZ-Dtree Navigation Plug-in” Documentation
by “Fiasco Zone Team” v1.0

A) Unzip and place - top

Our plugin based on bootstrap and jquery frameworks. To prepare your file please follow the following instructions :

    FZ Dtree /
    ├── css/
    │   ├── bootstrap.min.css 
    │   ├── fz-dtree.css 
    │   ├── fz.theme.css   
    |   └── icons.css
    ├── fonts/
    └── js/
        ├── jquery.min.js 
        ├── bootstrap.min.js 
        └── fz-dtree.min.js                         

You should have the above directory structure for your website.
Please note: If your site already includes any of the mentioned jQuery or Bootstrap files, do not include them and remove them from above includes.


B) Installation - top

Installing FZ_DTree is very easy and straight-forward. Simply add the following links and scripts tags with your proper paths and paste the following code inside the <head></head> tag of your HTML document.

<link href="../css/bootstrap.min.css" rel="stylesheet" />

<link href="../css/fz-dtree.css" rel="stylesheet" />

<link href="../css/fz.theme.css" rel="stylesheet" />

<link href="../css/icons.css" rel="stylesheet" />


<script src="../js/jquery.min.js"></script>

<script src="../js/bootstrap.min.js"></script>

<script src="../js/fz-dtree.min.js"></script>

You are almost done. The final step is to activate our Tree.


C) Usage: using jQuery selector - top

This section assumes that you have already included FZ_DTree required files as described in section Installation. Creating FZ_DTree is very simple. All we need is to create the basic HTML markup for our Tree and activate it using jQuery selector.

<head>
    <script>
        $(document).ready(function (){ 
        $('.YourTreeClass ').FZ_Dtree({});//Replace this line with  the generated code
        }); 
    </script>
</head>
 
<body>
<div class="YourTreeClass " ></div>  
</body>      
         

D) Sources and Credits - top

We've used the following resources.

FZ-DTree Options

The following default options are provided by the plugin. They can be overridden and customized by passing options object to the initialization of the plugin.

Set tree Header:

$('.YourTreeClass ').FZ_Dtree({
TreeHeader:'My New Header'
//initializing tree header
});

Remove the header:

$('.YourTreeClass ').FZ_Dtree({
TreeHeader:''
//sending blank header means you don't need header
});

themeCode- string(default: 'themeCode')

FZ-Dtree support the following themes ( Midnight,evergreen, fireBall, starAnise, autumnSky, Coolgreen, DarkNight, ClearDay). You can choose one of them or create your own one.

themeCode Example


$('.YourTreeClass ').FZ_Dtree({
themeCode:' evergreen'});

BackgroundCode- string(default: 'light')

You could choose between the 'dark' and the 'light' background

BackgroundCode Example

$('.YourTreeClass ').FZ_Dtree({BackgroundCode:' dark'});

Data -Json object (default: {})

Data is json object contains your tree structure; you could build your tree by json and send it while initializing the tree and it will be built dynamically.

JSON Schema

{"$schema":"http://json-schema.org/draft-04/schema#",
"id":"http://jsonschema.net",
"type":"object",
"properties":{
"Sections":{
"id":"http://jsonschema.net/Sections",
"type":"array",
"items":[
{
   "id":"http://jsonschema.net/Sections/0",
   "type":"object",
   "properties":{
      "SecID":{
         "id":"http://jsonschema.net/Sections/0/SecID",
         "type":"string",
         "description":"unique name doesn't contain space and special Character",
         "name":"Section ID"
      },
      "SecName":{
         "id":"http://jsonschema.net/Sections/0/SecName",
         "type":"string",
         "name":"Section Name",
         "description":"Section Name",
         "default":""
      },
      "SecIcon":{
         "id":"http://jsonschema.net/Sections/0/SecIcon",
         "type":"string",
         "description":"Class of font awesome",
         "name":"Section Icon",
         "default":""
      },
      "Folders":{
         "id":"http://jsonschema.net/Sections/0/Folders",
         "type":"array",
         "items":{
            "id":"http://jsonschema.net/Sections/0/Folders/0",
            "type":"object",
            "properties":{
               "ID":{
                  "id":"http://jsonschema.net/Sections/0/Folders/0/ID",
                  "type":"string",
                  "description":"unique name doesn't contain space and special Character",
                  "name":"Folder ID"
               },
               "Text":{
                  "id":"http://jsonschema.net/Sections/0/Folders/0/Text",
                  "type":"string",
                  "name":"Folder Name",
                  "description":"Contains Folder Name"
               },
               "ParentID":{
                  "id":"http://jsonschema.net/Sections/0/Folders/0/ParentID",
                  "type":"string",
                  "name":"Parent ID",
                  "description":"Parent ID could be Section ID or Folder ID"
               },
               "appendOption":{
                  "id":"http://jsonschema.net/Sections/0/Folders/0/appendOption",
                  "type":"string",
                  "description":"Contains appending Option(first-last-Before-After)",
                  "name":"Appending Option"
               },
               "appendBeforeItemID":{
                  "id":"http://jsonschema.net/Sections/0/Folders/0/appendBeforeItemID",
                  "type":"null",
                  "description":"if Append Option last or first this Item  not required else you should add it to append the file related to it",
                  "name":"Appending Item ID"
               },
               "SectionID":{
                  "id":"http://jsonschema.net/Sections/0/Folders/0/SectionID",
                  "type":"string",
                  "description":"contains the main section ID",
                  "name":"Section ID"
               }
            },
            "name":"Folder object"
         },
         "name":"Folder Array",
         "description":"Contain All Folders Belong to that section"
      },
      "Files":{
         "id":"http://jsonschema.net/Sections/0/Files",
         "type":"array",
         "items":{
            "id":"http://jsonschema.net/Sections/0/Files/0",
            "type":"object",
            "properties":{
               "ID":{
                  "id":"http://jsonschema.net/Sections/0/Files/0/ID",
                  "type":"string",
                  "name":"ID",
                  "description":"unique name doesn't contain space and special Character"
               },
               "Text":{
                  "id":"http://jsonschema.net/Sections/0/Files/0/Text",
                  "type":"string",
                  "name":"File Name",
                  "description":"Contains File Name"
               },
               "Icon":{
                  "id":"http://jsonschema.net/Sections/0/Files/0/Icon",
                  "type":"string",
                  "name":"Icon Class",
                  "description":"Contains File Icon Class"
               },
               "ParentID":{
                  "id":"http://jsonschema.net/Sections/0/Files/0/ParentID",
                  "type":"string",
                  "name":"Parent ID",
                  "description":"Parent ID could be Section ID or Folder ID"
               },
               "appendOption":{
                  "id":"http://jsonschema.net/Sections/0/Files/0/appendOption",
                  "type":"string",
                  "description":"Contains appending Option(first-last-Before-After)",
                  "name":"Appending Option",
                  "default":"last"
               },
               "appendBeforeItemID":{
                  "id":"http://jsonschema.net/Sections/0/Files/0/appendBeforeItemID",
                  "type":"string",
                  "name":"Appending Item ID",
                  "description":"if Append Option last or first this Item  not required else you should add it to append the file related to it"
               },
               "SectionID":{
                  "id":"http://jsonschema.net/Sections/0/Files/0/SectionID",
                  "type":"string",
                  "name":"Section ID",
                  "description":"contains the main section ID"
               }
            },
            "name":"File",
            "description":"Contains File Data"
         },
         "description":"Contain All Files Belong to that section",
         "name":"Files Array"
      }
   },
   "required":[
      "SecID",
      "SecName"
   ],
   "description":"Section object",
   "additionalProperties":false,
   "name":"Section"
},
null,
null
],
"required":[
"1",
"2"
],
"description":"Contains All Tree Section",
"name":"Section Array",
"additionalItems":false
}
},
"required":[
],
"description":"Main Object"}

data Example

$('.YourTreeClass ').FZ_Dtree({
   "TreeHeader":"My Tree Header",
   "themeCode":"Midnight",
   "BackgroundCode":"light",
   "data":{
      "Sections":[
         {
            "SecID":"Section_1",
            "SecName":"Section 1",
            "SecIcon":"fa fa-glass",
            "Folders":[
               {
                  "ID":"Folder_1",
                  "Text":"Folder 1",
                  "ParentID":"Section_1",
                  "appendOption":"0",
                  "appendBeforeItemID":null,
                  "SectionID":"Section_1"
               }
            ],
            "Files":[
               {
                  "ID":"File_1",
                  "Text":"File 1",
                  "Icon":"fa fa-heart",
                  "ParentID":"Section_1",
                  "appendOption":"0",
                  "appendBeforeItemID":null,
                  "SectionID":"Section_1"
               }
            ]
         }
      ]
   }
})
                

AddingOptions-Enum

AddingOptions is enumeration consists of a set of options that determine your node position. You could put your folder or file in the last or first of the parent childern list or before or after one of the parent's children

AddingOptions Example

$.FZ_Dtree.AddingOptions = {
Last: 0,
First: 1,
Before: 2,
After: 3
};

TreeComponent-Enum

TreeComponent is enumeration consists of a set of All Tree Component. you could use it while handling TreeException

TreeComponent Example


$.FZ_Dtree.TreeComponent = 
{Section: 0,
Folder: 1,
File: 2};

TreeAction-Enum

TreeAction is enumeration consists of a set of All Tree Actions. you could use it while handling TreeException

TreeAction Example

 
$.FZ_Dtree.TreeAction =
 { Add: 0,
        Edit: 1,
        Remove: 2,
        Get: 3};

FZ-DTree Methods

Below is a list of our plugin methods.

AddSection

Add section to the tree.

AddSection Parameters

Section json object
{SecID:'',
SecName:'',
SecIcon:''}

Json Object Descreption

SecID string

unique string doesn't contain space nor special characters.

SecName string

contains section name.

SecIcon string

contains icon class of Awesome Font.

AddSection Example

$('.YourTreeClass ').FZ_Dtree('addSection',{  
   SecID:"unique_ID",
   SecName:"Section Name",
   SecIcon:"fa fa-glass "
});

AppendFolderToMenu

Add folder to the tree. Folder must have parent either section or another folder (if you want to create multilevel). You could also organize the folder position. You may want to add it at the last , first , before or after another tree element.

AppendFolderToMenu Parameters

folder json object
{  
   ID:'',
   Text:'',
   ParentID:'',
   appendOption:'',
   appendBeforeItemID:''
}

Json Object Descreption

ID string

unique string don't contain space and special characters.

Text string

contains folder name.

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum .

$.FZ_Dtree.AddingOptions = {
        Last: 0,
        First: 1,
        Before: 2,
        After: 3
    }; 
appendBeforeItemID string

If the appendOption value is before or after, You should send the item id .

AppendFolderToMenu Example

$('.YourTreeClass ').FZ_Dtree('AppendFolderToMenu',{  
   ID:"unique_ID",
   Text:"Folder Name",
   ParentID:"Section_1",
   appendOption:$.FZ_Dtree.AddingOptions.Before,
   appendBeforeItemID:"file_1"
});

AppendFileToMenu

Add file to the tree ,file must have a parent section or folder. You could also organize the file position you may want to add it at the last , first , before or after another item inside the tree

AppendFileToMenu Parameters

file json object
{  
   ID:'',
   Text:'',
   ParentID:'',
   Icon:'',
   appendOption:'',
   appendBeforeItemID:''
}

Json Object Descreption

ID string

unique string don't contain space and special characters.

Text string

contains file name.

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum .

$.FZ_Dtree.AddingOptions = {
        Last: 0,
        First: 1,
        Before: 2,
        After: 3
    }; 
appendBeforeItemID string

if the appendOption value before or after then you should send the item id .

AppendFileToMenu Example

$('.YourTreeClass ').FZ_Dtree('AppendFolderToMenu',{  
   ID:"unique_ID",
   Text:"Folder Name",
   ParentID:"Section_1",
   appendOption:$.FZ_Dtree.AddingOptions.Before,
   appendBeforeItemID:"file_1"
});

EditSection

This for editting any section you already Created, You could change this section name and icon but you couldn't change the id you created at the first time.

EditSection Parameters

Section json object
{  
   SecID:'',
   SecName:'',
   SecIcon:''
}

Json Object Descreption

SecID string

id of already exist section.

SecName string

contains section name.

SecIcon string

contains icon class of font awesome .

EditSection Example

$('.YourTreeClass ').FZ_Dtree('EditSection',{  
   SecID:"unique_ID",
   SecName:"Section Name",
   SecIcon:"fa fa-glass "
});

EditFolder

This for editting any folder you already created. You could change it's name or position but you couldn't change it's old id.

EditFolder Parameters

folder json object
{  
   ID:'',
   Text:'',
   ParentID:'',
   appendOption:'',
   appendBeforeItemID:''
}

Json Object Descreption

ID string

unique string don't contain space and special characters.

Text string

contains folder name.

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum .

$.FZ_Dtree.AddingOptions = {
        Last: 0,
        First: 1,
        Before: 2,
        After: 3
    }; 
appendBeforeItemID string

if the appendOption value before or after then you should send the item id .

EditFolder Example

$('.YourTreeClass ').FZ_Dtree('EditFolder',{  
   ID:"unique_ID",
   Text:"Folder Name",
   ParentID:"Section_1",
   appendOption:$.FZ_Dtree.AddingOptions.Before,
   appendBeforeItemID:"file_1"
});

EditFile

Edit file that already exist, you could change its name or position but you couldn't change file id.

EditFile Parameters

file json object
{  
   ID:'',
   Text:'',
   ParentID:'',
   Icon:'',
   appendOption:'',
   appendBeforeItemID:''
}

Json Object Descreption

ID string

unique string don't contain space and special characters.

Text string

contains file name.

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum .

$.FZ_Dtree.AddingOptions = {
        Last: 0,
        First: 1,
        Before: 2,
        After: 3
    }; 
appendBeforeItemID string

if the appendOption value before or after then you should send the item id .

EditFile Example

$('.YourTreeClass ').FZ_Dtree('AppendFolderToMenu',{  
   ID:"unique_ID",
   Text:"Folder Name",
   ParentID:"Section_1",
   appendOption:$.FZ_Dtree.AddingOptions.Before,
   appendBeforeItemID:"file_1"
});

removeSection

Remove already exist section will delete all folders and files in that section

removeSection Parameters

SecID string

section id .

removeSection Example

$('.YourTreeClass ').FZ_Dtree(' removeSection',secID);

removeFolder

Remove already exist folder will delete all folders and files in that folder

removeFolder Parameters

folderID string

folder id .

removeFolder Example

$('.YourTreeClass ').FZ_Dtree('removeFolder',folderID);

removeFile

Remove already exist file

removeFile Parameters

fileID string

file id .

removeFile Example

$('.YourTreeClass ').FZ_Dtree(' removeFile', fileID);

checkIDExist

Check if ID already exists, If not return false.

checkIDExist Parameters

id string

node id .

checkIDExist Example

$.FZ_Dtree.checkIDExist('folder_ID');

setTreeHeader

Change Tree Header

setTreeHeader Parameters

tHeader string

New Tree Header.

setTreeHeader Example

$('.YourTreeClass ').FZ_Dtree('setTreeHeader','My Tree');

SetThemeCode

Change Tree Theme

SetThemeCode Parameters

themeVal string

class name you could choose from 8 themes ( Midnight,evergreen, fireBall, starAnise, autumnSky, Coolgreen, DarkNight, ClearDay) Or you could create your own.

SetThemeCode Example

$('.YourTreeClass ').FZ_Dtree('setThemeCode', fireBall);

setBackgroundCode

Change Tree background

setBackgroundCode Parameters

backgroundVal string

class name you could choose from (dark,light) .

setBackgroundCode Example

$('.YourTreeClass ').FZ_Dtree('setBackgroundCode', 'light')

getTreeJsonData

get all tree's options

getTreeJsonData Example

$('.YourTreeClass ').FZ_Dtree('getTreeJsonData')

getFilesBySectionID

get all files in the section

getFilesBySectionID Parameters

secID string

Section ID .

getFilesBySectionID Example

$('.YourTreeClass ').FZ_Dtree(' getFilesBySectionID', 'sec_1');

getFilesByFolderID

get all files in folder

getFilesByFolderID Parameters

fID string

Folder ID .

getFilesByFolderID Example

$('.YourTreeClass ').FZ_Dtree(' getFilesByFolderID', 'folder_1')

getFolderChildren

Get all folder children

getFolderChildren Parameters

fID string

Folder ID .

getFolderChildren Example

$('.YourTreeClass ').FZ_Dtree(' getFolderChildren', 'folder_1')

getFoldersBySectionID

get all folder in the section

getFoldersBySectionID Parameters

secID string

Section ID .

getFoldersBySectionID Example

$('.YourTreeClass ').FZ_Dtree(' getFoldersBySectionID', 'sec_1')

getAllFolders

get all folder in the tree

getAllFolders Example

$('.YourTreeClass ').FZ_Dtree(' getAllFolders')

getDirectChildren

Get the direct child of any section or folder.

getDirectChildren Parameters

secID string

Section ID .

getDirectChildren Example

$('.YourTreeClass ').FZ_Dtree(' getDirectChildren','sec_1')

getAllSectionsJson

get all section in the tree

getAllSectionsJson Example

$('.YourTreeClass ').FZ_Dtree(' getAllSectionsJson')

getSectionJson

get section json by section id

getSectionJson Parameters

secID string

Section ID .

getSectionJson Example

$('.YourTreeClass ').FZ_Dtree(' getSectionJson',secID)

selectFromTree

open node location

selectFromTree Parameters

nodeID string

folder ID or file id .

selectFromTree Example

$('.YourTreeClass ').FZ_Dtree(' selectFromTree', 'folder_1')

FZ-Dtree Events

TreeException

This event is triggered if any exception thrown while adding ,editing or removing objects.

Event Data

event Event object

The event data object.

ErrorDataJson object

Contains information about the error.

ErrorData Descreption

ErrorData.Massage string

error massage

ErrorData.ComponentID string

ID of object that raises the error .

ErrorData.ErrorIN string

Item name in the json object that caused the error .if it is empty or undefined this means generic exception has been thrown

ErrorData.TreeComponent int

Object of that enum .

$.FZ_Dtree.TreeComponent = {
        Section: 0,
        Folder: 1,
        File: 2
    };
ErrorData.Action int

object of that enum .

$.FZ_Dtree.TreeAction = {
        Add: 0,
        Edit: 1,
        Remove: 2,
        Get: 3
    };

TreeException Example

$('.YourTreeClass ').on('TreeExceptions',function(event,ErrorData){
console.log(ErrorData.Massage);
})

SectionAdded

This event is triggered after adding section to tree.

Event Data

event Event object

The event data object .

sec Json object

object of the section that added to the tree .

section object Descreption

SecID string

Section ID.

SecName string

contains section name.

SecIcon string

contains icon class of Font-Awesome.

SectionAdded Example

$('.YourTreeClass ').on(' FileAdded',function(event,file){
//your code here
});

FolderAdded

This event is triggered after adding folder inside the tree.

Event Data

event Event object

The event data object.

folder Json object

object of the folder that added to the tree .

folder object Descreption

ID string

Folder ID.

Text string

contains file name.

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum .

$.FZ_Dtree.AddingOptions = {
        Last: 0,
        First: 1,
        Before: 2,
        After: 3
    }; 
appendBeforeItemID string

contains item id only if the appendOption value before or after.

FolderAdded Example

$('.YourTreeClass ').on('FolderAdded',function(event,folder){
//your code here});

FileAdded

This event is triggered after adding file to tree.

Event Data

event Event object

The event data object.

file Json object

object of the file that added to the tree.

file object Descreption

IDstring

File ID.

Text string

contains file name.

Icon string

class of font awesome.

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum .

$.FZ_Dtree.AddingOptions = {
        Last: 0,
        First: 1,
        Before: 2,
        After: 3
    }; 
appendBeforeItemID string

contains item id only if the appendOption value before or after.

FileAdded Example

$('.YourTreeClass ').on(' FileEdited',function(event,file){
//your code here
});


SectionEdited

This event is triggered after editing section.

Event Data

event Event object

The event data object.

sec Json object

object of the section that added to the tree.

section object Descreption

SecID string

Section ID.

SecName string

contains section name.

SecIcon string

contains icon class of Font-Awesome.

SectionEdited Example

$('.YourTreeClass ').on(' SectionEdited',function(event,sec){
//your code here
});

FolderEdited

This event is triggered after editing folder.

Event Data

event Event object

The event data object.

folder Json object

object of the folder that added to the tree.

folder object Descreption

ID string

Folder ID.

Text string

contains file name.

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum.

$.FZ_Dtree.AddingOptions = {
        Last: 0,
        First: 1,
        Before: 2,
        After: 3
    }; 
appendBeforeItemID string

contains item id only if the appendOption value before or after.

FolderEdited Example

$('.YourTreeClass ').on(' FolderEdited',function(event,folder){
//your code here
});

FileEdited

This event is triggered after editing file.

Event Data

event Event object

The event data object.

file Json object

object of the file that added to the tree.

file object Descreption

ID string

file ID.

Text string

contains file name.

Icon string

class of font awesome.

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum.

$.FZ_Dtree.AddingOptions = {
        Last: 0,
        First: 1,
        Before: 2,
        After: 3
    }; 
appendBeforeItemID string

contains item id only if the appendOption value before or after.

FileEdited Example

$('.YourTreeClass ').on(' FileAdded',function(event,file){
//your code here
});

SectionRemoved

This event triggers after you remove your sectionn.

Event Data

event Event object

The event data object.

secID string

Section ID.

SectionRemoved Example

$('.YourTreeClass ').on(' SectionRemoved',function(event, secID){
//your code here
});

FolderRemoved

This event triggers after you remove your folder.

Event Data

event Event object

The event data object.

folID string

folder ID.

FolderRemoved Example

$('.YourTreeClass ').on(' FolderRemoved',function(event, folID){
//your code here
});

FileRemoved

This event triggers after you remove your file.

Event Data

event Event object

The event data object.

fileID string

file ID.

FileRemoved Example

$('.YourTreeClass ').on(' FileRemoved',function(event, fileID){
//your code here
});

SectionClick

This event is triggered after click on section.

Event Data

event Event object

The event data object.

sec Json object

object of the section that added to the tree.

section object Descreption

SecID string

Section ID.

SecName string

contains section name.

SecIcon string

contains icon class of font awesome.

SectionClick Example

$('.YourTreeClass ').on(' SectionClick',function(event,sec){
//your code here
});

FolderClick

This event is triggered after clicking on folder.

Event Data

event Event object

The event data object .

folder Json object

Object of the folder that added to the tree .

folder object Descreption

ID string

Folder ID.

Text string

contains folder name.

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum .

$.FZ_Dtree.AddingOptions = {
Last: 0,
First: 1,
Before: 2,
After: 3}; 
appendBeforeItemID string

contains item id only if the appendOption value before or after .

FolderClick Example

$('.YourTreeClass ').on('FolderClick',function(event,folder){
//your code here
});

FileClick

This event is triggered after clicking on file.

Event Data

event Event object

The event data object .

file Json object

object of the file that added to the tree .

file object Descreption

ID string

File ID.

Text string

contains file name.

Icon string

class of font awesome .

ParentID string

contains section id or folder id.

appendOption int

one value from the below enum .

$.FZ_Dtree.AddingOptions = {
Last: 0,
First: 1,
Before: 2,
After: 3};
appendBeforeItemID string

contains item id only if the appendOption value before or after .

FileClick Example

$('.YourTreeClass ').on(' FileClick',function(event, file){
//your code here
});