Good evening,
I just want to share an example of integrating a library called Fancytree with anvil.
The implementation is very neat. One need to add these two lines to Native Libraries
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/skin-win8/ui.fancytree.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/jquery.fancytree-all-deps.js"></script>
Then the rest of the code is python in combination with a little bit of jquery.
...
self.tree_data = [
{"title": "Node1", "key": "Node1", "folder": True},
{"title": "Node2", "key": "Node2", "folder": False},
{"title": "Node3", "folder": False, "children": [
{"title": "Node3Child1", "checkbox": True, "folder": False},
{"title": "Node3Child2", "folder": False},
{"title": "Node3Child3", "folder": False}
]}
]
def form_show(self, **event_args):
# Get the DOM node for the Anvil spacer component where you want to initialize the Fancytree
tree_dom_node = anvil.js.get_dom_node(self.tree_spacer)
# Initialize the Fancytree on the DOM node using jQuery
jQuery(tree_dom_node).fancytree({
"checkbox": True,
"selectMode": 3,
"source": self.tree_data,
"activate": lambda event, data: self.update_status_label(data.node)
})
Feel free to try it out
Link to live project:
Link to Fancytree:
Link to project: