jQuery Tree

Tree Overview

jQuery Tree by Gijgo.com is a plug-in for the jQuery Javascript library. It is a very fast and extandable tool, and will add advanced interaction controls to any tree structure. This plugin allows you to create tree structure using bootstrap or material design styles. Free open source tool distributed under MIT License.

Getting Started

<html>
<head>
    <meta charset="utf-8" />
    <title>Treeview Example</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="tree"></div>
    <script>
        var tree = $('#tree').tree({
            primaryKey: 'id',
            dataSource: '/Locations/Get',
            imageUrlField: 'flagUrl'
        });
        tree.on('dataBound', function () {
            var node = tree.getNodeByText('North America');
            tree.expand(node);
        });
    </script>
</body>
</html>
 
<html>
<head>
    <meta charset="utf-8" />
    <title>Treeview Example</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="tree"></div>
    <script>
        var tree = $('#tree').tree({
            primaryKey: 'id',
            dataSource: '/Locations/Get',
            imageUrlField: 'flagUrl'
        });
        tree.on('dataBound', function () {
            var node = tree.getNodeByText('North America');
            tree.expand(node);
        });
    </script>
</body>
</html>