Treeview

General information

AciTree is a plug-in for the jQuery library that provides a tree view with various interactive features whose layout and functionalities can be customized.

A typical treeview in our applications looks like this:

Installation

1. Download latest version of jQuery aciTree from the following link: https://github.com/dragosu/jquery-aciTree

2. Store the downloaded files in the folder "Plugins" > "acitree" (Create the file if it does not exist yet)

3. Add the following lines in the "Layout.cshtml" file

<link rel="stylesheet" href="~/Plugins/acitree/css/aciTree.css" />

    <script type="text/javascript" src="~/Plugins/acitree/js/jquery.aciPlugin.min.js"></script>
    <script type="text/javascript" src="~/Plugins/acitree/js/jquery.aciTree.core.js"></script>
    <script type="text/javascript" src="~/Plugins/acitree/js/jquery.aciTree.min.js"></script>

How to use

The simplest form of the treeview is implemented in the following way:

<div id="tree" class="aciTree"></div>

<script>

    $(document).ready(function () {

        // initiate XXX list tree
        var jsonObj = '@Html.Raw(Json.Encode(Model.XXXList))'
        
        $('#tree').aciTree({
            ajax: null,
            rootData: $.parseJSON(jsonObj),
            selectable: false
        });
        
    });
        
</script>

Examples

Example: Tree with Selectable Leaves

The following code implements the functionality of a tree whose leaves can be selected ("selectable" set to true) and when a leaf is clicked, its id will get displayed in an alert pop-up:

<script>

    $(document).ready(function () {

        // Initiate Parts list tree
        var jsonObj = '@Html.Raw(Json.Encode(Model.PartsList))'
        
        $('#tree').aciTree({
            ajax: null,
            rootData: $.parseJSON(jsonObj),
            selectable: true
        });

        //handle select event
        $('#tree').on("acitree", function (event, api, item, eventName, options) {
            if (eventName == "selected") {
                var itemid = api.getId(item);
                alert(itemid);
            }
        });
        
    });
        
</script>