How to use fancytree?

Henk huisman

unread,

Dec 1, 2015, 12:03:01 AM12/1/15

to web2py-users

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?

Johann Spies

unread,

Dec 1, 2015, 2:30:21 AM12/1/15

to web...@googlegroups.com

On 1 December 2015 at 04:08, Henk huisman <huisman...@gmail.com> wrote:

This is the code I tried:

<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"></

Are you sure these two sources are correct? Shouldn't it be http://code....?

Regards

Johann

--

Because experiencing your loyal love is better than life itself,
my lips will praise you. (Psalm 63:3)

Henk huisman

unread,

Dec 1, 2015, 3:46:22 PM12/1/15

to web2py-users

Thanks for your suggestion, Johann.

I tried it, but doesn't seem to make much difference.

If I look at the source code in my browser, all the links to css and js files seem to work well...

Tried to put the javascript and css in layout.html.. no results either.

What do I see over the head?

Henk

Op dinsdag 1 december 2015 04:30:21 UTC-3 schreef Johann Spies:

DenesL

unread,

Dec 2, 2015, 6:52:36 AM12/2/15

to web2py-users

Hi, assuming that the paths to the js & css files are correct you are missing the closing of $(function(){ in your script.
Just duplicate the last line at the very end, i.e. add });

Denes

Anthony

unread,

Dec 2, 2015, 8:50:48 AM12/2/15

to web2py-users

Always check the browser Javascript console to see if there are JS errors.

Henk huisman

unread,

Dec 2, 2015, 10:31:22 AM12/2/15

to web2py-users

It does work! Mille Grazie!

Thanks DenesL and Anthony.

Reply all

Reply to author

Forward