<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Contextmenu Fancytree - Demo</title>
<script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<link href="//cdn.jsdelivr.net/jquery.fancytree/2/skin-win8/ui.fancytree.min.css" type="text/css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/jquery.fancytree/2/jquery.fancytree-all.min.js" type="text/javascript"></script>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.min.js">
</script>
<script src="http://wwwendt.de/tech/fancytree/3rd-party/extensions/contextmenu/js/jquery.fancytree.contextMenu.js"></script>
<script type="text/javascript">
$(function () {
var SOURCE = [
{"title": "simple node (no explicit id, so a default key is generated)" },
{"key": "2", "title": "item1 with key and tooltip", "tooltip": "Look, a tool tip!" },
{"key": "3", "title": "<span>item2 with <b>html</b> inside a span tag</span>" },
{"key": "4", "title": "node 4" },
{"key": "5", "title": "using href", "href": "http://www.wwWendt.de/" },
{"key": "6", "title": "node with some extra classes (will be added to the generated markup)", "extraClasses": "my-extra-class" },
{"key": "10", "title": "Folder 1", "folder": true, "children": [
{"key": "10_1", "title": "Sub-item 1.1", "children": [
{"key": "10_1_1", "title": "Sub-item 1.1.1"},
{"key": "10_1_2", "title": "Sub-item 1.1.2 r"}
]},
{"key": "10_2", "title": "Sub-item 1.2", "children": [
{"key": "10_2_1", "title": "Sub-item 1.2.1"},
{"key": "10_2_2", "title": "Sub-item 1.2.2"}
]}
]},
{"key": "20", "title": "Simple node with active children (expand)", "expanded": true, "children": [
{"key": "20_1", "title": "Sub-item 2.1", "children": [
{"key": "20_1_1", "title": "Sub-item 2.1.1"},
{"key": "20_1_2", "title": "Sub-item 2.1.2"}
]},
{"key": "20_2", "title": "Sub-item 2.2", "children": [
{"key": "20_2_1", "title": "Sub-item 2.2.1"},
{"key": "20_2_2", "title": "Sub-item 2.2.2"}
]}
]}
];
$('#tree').fancytree({
extensions: ['contextMenu'],
source: SOURCE,
contextMenu: {
menu: {
'edit': {'name': 'Edit', 'icon': 'edit'},
'cut': {'name': 'Cut', 'icon': 'cut'},
'copy': {'name': 'Copy', 'icon': 'copy'},
'paste': {'name': 'Paste', 'icon': 'paste'},
'delete': {'name': 'Delete', 'icon': 'delete', 'disabled': true},
'sep1': '---------',
'quit': {'name': 'Quit', 'icon': 'quit'},
'sep2': '---------',
'fold1': {
'name': 'Sub group',
'items': {
'fold1-key1': {'name': 'Foo bar'},
'fold2': {
'name': 'Sub group 2',
'items': {
'fold2-key1': {'name': 'alpha'},
'fold2-key2': {'name': 'bravo'},
'fold2-key3': {'name': 'charlie'}
}
},
'fold1-key3': {'name': 'delta'}
}
},
'fold1a': {
'name': 'Other group',
'items': {
'fold1a-key1': {'name': 'echo'},
'fold1a-key2': {'name': 'foxtrot'},
'fold1a-key3': {'name': 'golf'}
}
}
},
actions: function (node, action, options) {
$('#selected-action').text('Selected action "' + action + '" on node ' + node);
}
},
lazyLoad: function (event, data) {
data.result = {url: '../../ajax-sub2.json'}
}
});
});
</script>
</head>
<body class="example">
<!-- Tree wrapper -->
<div id="tree"></div>
<hr />
<div id="selected-action">Click right mouse button on node</div>
</body>
</html>
$(function(){
var sampleSource = [
{ title: "Folder 1", folder: true, children: [
{ title: "Subnode 1.1"},
{ title: "Subnode 1.2"},
{ title: "Subnode 1.3"}
]},
{ title: "Folder 2", expanded: true, children: [
{ title: "Subnode 2.1"},
{ title: "Subnode 2.2"},
{ title: "Subnode 2.3"}
]},
{ title: "Lazy Folder", lazy: true }
];
$("#tree").fancytree({
// extensions: ["childcounter"],
// checkbox: true,
source: sampleSource,
lazyLoad: function(event, data) {
data.result = { url: "sample1.json" };
}
});
$("#button1").click(function(event){
var tree = $("#tree").fancytree("getTree"),
node = tree.getActiveNode();
alert("Actie node " + node);
});
});
/* Styles go here */
# Fancytree Basic Sample
Use this Plunk to try Fancytree options or reproduce errors.
[
{"title": "Subnode 1"},
{"title": "Subnode 2", "lazy": true}
]