Fancytree looks to me as a nice javascript library to generate trees (
https://github.com/mar10/fancytree/wiki).
Unfortunatily I don't get it to work in Web2py.
I just installed the libraries etc and copied some code from the examples
websites, but the function fancytree does....nothing.
This is the code I tried:
<!DOCTYPE html>
<html>
<head>
<title>Fancytree - Example: Select</title>
<link rel="stylesheet" href=
"{{=URL('static','fancytree/dist/skin-lion/ui.fancytree.min.css')}}"/>
<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"
></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" type=
"text/javascript"></script>
<script src=
"{{=URL('static','fancytree/dist/jquery.fancytree-all.min.js')}}"></script>
<script type="text/javascript">
var treeData = [
{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
{title: "item2: selected on init", selected: true },
{title: "Folder", folder: true, key: "id3",
children: [
{title: "Sub-item 3.1",
children: [
{title: "Sub-item 3.1.1", key: "id3.1.1" },
{title: "Sub-item 3.1.2", key: "id3.1.2" }
]
},
{title: "Sub-item 3.2",
children: [
{title: "Sub-item 3.2.1", key: "id3.2.1" },
{title: "Sub-item 3.2.2", key: "id3.2.2" }
]
}
]
},
{title: "Document with some children (expanded on init)", key: "id4",
expanded: true,
children: [
{title: "Sub-item 4.1 (active on init)", active: true,
children: [
{title: "Sub-item 4.1.1", key: "id4.1.1" },
{title: "Sub-item 4.1.2", key: "id4.1.2" }
]
},
{title: "Sub-item 4.2 (selected on init)", selected: true,
children: [
{title: "Sub-item 4.2.1", key: "id4.2.1" },
{title: "Sub-item 4.2.2", key: "id4.2.2" }
]
},
{title: "Sub-item 4.3 (hideCheckbox)", hideCheckbox: true },
{title: "Sub-item 4.4 (unselectable)", unselectable: true }
]
},
{title: "Lazy folder", folder: true, lazy: true }
];
$(function(){
$("#tree1").fancytree({
checkbox: true,
selectMode: 1,
source: treeData,
activate: function(event, data) {
$("#echoActive1").text(data.node.title);
},
select: function(event, data) {
// Display list of selected nodes
var s = data.tree.getSelectedNodes().join(", ");
$("#echoSelection1").text(s);
},
dblclick: function(event, data) {
data.node.toggleSelected();
},
keydown: function(event, data) {
if( event.which === 32 ) {
data.node.toggleSelected();
return false;
}
}
});
</script>
</head>
<body class="example">
<h1>Example: Selection and checkbox</h1>
<!-- Tree #1 -->
<div id="tree1" class="fancytree-radio"> </div>
<div>Active node: <span id="echoActive1">-</span></div>
<div>Selection: <span id="echoSelection1">-</span></div>
</body>
</html>
The controller is just same name as the view and returns a dict which is
not used anyway in the view.
The view loads and what you see is:
Example: Selection and checkbox
Active node: -
Selection: -
What am I missing?
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
