ArtaraxTreeView

ArtaraxTreeView allows you to display any tree structure data such as product categories or etc. It also allows you to edit or delete tree items, you can simply get all data of the item that user wants to edit or delete.

See DEMO here: https://github.com/H-Moradof/ArtaraxTreeView/blob/master/persian-demo.gif

How to use

1) Put this on your html page:

 <ul class="treeview"></ul>

2) Add jquery and plugin file into your html page a:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- plugin -->
<script src="/artarax-treeview/jquery.artaraxtreeview.js"></script>

3) Declare a json array of objects with 'Id','Title','ParentId' properties

(you can also declare an array of selected ids for checking some items on load)

var treeViewData = [
      { 'Id' : 1, 'Title' : 'root', 'ParentId' : null },
      { 'Id' : 2, 'Title' : 'item 1', 'ParentId' : 1 },
      { 'Id' : 3, 'Title' : 'item 2', 'ParentId' : 1 },
      { 'Id' : 4, 'Title' : 'item 3', 'ParentId' : 1 },
      { 'Id' : 5, 'Title' : 'item 1-1', 'ParentId' : 2 },
      { 'Id' : 6, 'Title' : 'item 1-2', 'ParentId' : 2 },
      { 'Id' : 7, 'Title' : 'item 2-1', 'ParentId' : 3 },
      { 'Id' : 8, 'Title' : 'item 3-1', 'ParentId' : 4 },
      { 'Id' : 9, 'Title' : 'item 3-2', 'ParentId' : 4 }
  ];
        
var selectedItemIds = [7,8,9];

*Note that your first record MUST be root item with id = 1

4) Set treeview settings and assign your previous variables

(you can also set multiple awesome settings like 'mode', 'isDisplayChildren' and etc)

// set settings
var artaraxTreeView = $.artaraxTreeView({
    jsonData: treeViewData,
    selectedIds: selectedItemIds, 
    updateCallBack: onUpdate, // callback function
    deleteCallBack: onDelete // callback function
});

// when user click the delete/update button on an item in treeview, the plugin send the item's object into your callback functions

function onUpdate(obj)
{
    // you can load updating item's data into your form to let user to edit that
    alert(obj.Id + " " + obj.Title + " " + obj.ParentId);
}

function onDelete(obj)
{
    // you can call an API to delete the item
    alert(obj.Id + " " + obj.Title + " " + obj.ParentId);
}

5) Load treeview by code below

// load treeview
artaraxTreeView.loadTreeViewOnInsert(1);

Here is the full settings and public functions that you can use

/* -------------------------------------------------------------
   options:
    {
        jsonData: 
            an object array with {Id, Title, ParentId} properties
        selectedIds: 
            an long array of selected ids
        isDisplayChildren:
            this make child <ul> tags display hidden or block. 
            *Valid values are true/false 
            (default is true)
        mode: 
            "deletable,updatable,radiobox,autoSelectChildren"
            (default is "deletable,updatable,autoSelectChildren")
        updateCallBack: 
            callback function that can get selected object as a param
        deleteCallBack: 
            callback function that can get selected object as a param
    }

    methods:
        1) getSelectedIds() : get an array of selected ids
        2) loadTreeViewOnInsert(rootId) : load treeview items
        3) loadTreeViewOnUpdate(rootId) : load treeview items and checked selected checkboxes
        4) unCheckedAll()
--------------------------------------------------------------------- */

For more information please see the source. there is a demo file (index.html)

If you need help, call me : h.moradof@gmail.com http://moradof.com