Fancytree - Init from object array

This sample includes all options (with their default values) to allow playing with them.

by moob

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mar10/fancytree@2/dist/skin-win8/ui.fancytree.min.css">
<script src="https://cdn.jsdelivr.net/gh/mar10/fancytree@2/dist/jquery.fancytree-all-deps.min.js"></script>
<div id="tree"></div>
<p>
    <button id="button1">Scroll to bottom node</button>
    <button id="button2">Scroll to top node</button>
</p>

CSS

#tree {
  height: 100px;
  overflow: auto;
}

#button1, #button2 {
  margin-top: 20px;
}

.selectedNode {
    background-color: rgb(255, 165, 0);
}

JavaScript

$(function(){
    $("#tree").fancytree({
        checkbox: true,
        source: [
            {title: "Node 1"},
            {title: "Node 2"},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Top Node", key:"topNode", folder: true, children: [
                {title: "Node 22222222222222"},
                {title: "Node 222222222222222"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true, children: [
                {title: "Node 3.1"},
                {title: "Node 3.2"}
            ]},
            {title: "Folder 3", folder: true,...