How to populate jquery treeselect widget?

Question

I am having trouble with populating this jquery treeselect widget with a json file (or anything) I am new to jquery/javascript so I am probably missing some fundamentals.

I have the plugin from https://github.com/travist/jquery.treeselect.js and have found no example of how to load it up.

<html>
<head>
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
    <script type='text/javascript' src='js/jquery.moreorless.js'></script>
    <script type='text/javascript' src='js/jquery.treeselect.js'></script>
    <script type='text/javascript' src='js/jquery.chosentree.js'></script>

    <link rel='stylesheet' type='text/css' href='css/moreorless.css'/>
    <link rel='stylesheet' type='text/css' href='css/treeselect.css'/>
    <link rel='stylesheet' type='text/css' href='css/chosen.css'/>
    <script type='text/javascript'>
        jQuery(function () {

            var data1 = ["EVENT1", "EVENT2"];
            var data2 = [{
                "id": 1,
                "name": "A green door"
            },
                {
                    "id": 2,
                    "name": "A blue door"
                }
            ]

            $('div.chosentree').chosentree({
                width: 200,
                deepLoad: true,
                default_value: data2, // does not work 
                load: function (node, callback) {

                    // What do I put here?
                    /**
                     * This would typically call jQuery.ajax to load a new node
                     * on your server where you would return the tree structure
                     * for the provided node.
                     */
                }
            });
        });
    </script>
</head>
<body>
<div class="chosentree"></div>
</body>
</html>

score 2 · Accepted Answer · answered May 15 '15 at 23:17

The best way to figure out how this works is to take a look at the example files provided within the repo found @ https://github.com/travist/jquery.treeselect.js/blob/master/treeselect.html. Here you will see the following code.

$('div.chosentree').chosentree({
  width: 500,
  deepLoad: true,
  showtree: true,
  load: function(node, callback) {
    setTimeout(function() {
      callback(loadChildren(node, 0));
    }, 1000);
  }
});

The code within the load method here is actually performing a fake request on what the data would look like. It does this by calling a method called loadChildren which is defined in the file found @ https://github.com/travist/jquery.treeselect.js/blob/master/index.html. Which is the following...

var maxDepth = 3;
var loadChildren = function(node, level) {
  var hasChildren = node.level < maxDepth;
  for (var i=0; i<8; i++) {
    var id = node.id + (i+1).toString();
    node.children.push({
      id:id,
      title:'Node ' + id,
      has_children:hasChildren,
      level: node.level + 1,
      children:[]
    });
    if (hasChildren && level < 2) {
      loadChildren(node.children[i], (level+1));
    }
  }
  return node;
};

What is important to realize is that this is "faking" a request to the server. This basically fakes a request to a server that would return something that looks like the following.

{
  "id": "1",
  "title": "Node 1",
  "has_children": "1",
  "children": [
    {
      "id": "11",
      "title": "Node 11",
      "has_children": "1",
      "children": [

      ]
    },
    ...
    ...
  ]
}

The load method is then called by passing in a single node object, which you can use to load all of the children under that node if you wish.

I hope this helps.

Thanks, helped a lot! Took me a while to understand what needs to be done but now I just mock the response from server and load up the tree in my own loadChildren function. — LocalMagic, May 18 '15 at 06:54

score 2 · Answer 2 · answered Aug 23 '15 at 14:48

Wanted to post this code because I've spent the last 2 hours thinking it wouldn't take raw JSON. It does, but don't forget to run your string literal through JSON.parse(jsonString);

Example:

    jQuery(function() {
        JSONObject = JSON.parse('{"id":"01","title":"Node 01","has_children":true,"level":1,"children":[{"id":"011","title":"Node 011","has_children":true,"level":2,"children":[{"id":"0111","title":"Node 0111","has_children":false,"level":3,"children":[]}]}]}');

        $('div.chosentree').chosentree({
            width: 500,
            deepLoad: true,
            load: function(node, callback) {
                    callback(JSONObject);
            }
        });
    });

How to populate jquery treeselect widget?

2 Answers2

Linked