Add ability to specify root JSON element to populate data tree

[tonydilger]

I did a slight modification to jqTree for a project we are working that allows us to specify which element to use as the object to populate the tree.

It only works for one level deep but works for what we need.

Added extra option to defaults as follows:

    JqTreeWidget.prototype.defaults = {
      autoOpen: false,
      saveState: false,
      dragAndDrop: false,
      selectable: true,
      useContextMenu: true,
      onCanSelectNode: null,
      onSetStateFromStorage: null,
      onGetStateFromStorage: null,
      onCreateLi: null,
      onIsMoveHandle: null,
      onCanMove: null,
      onCanMoveTo: null,
      onLoadFailed: null,
      autoEscape: true,
      dataUrl: null,
      rootJSONElement: null,
      closedIcon: '►',
      openedIcon: '▼',
      slide: true,
      nodeClass: Node
    };

Updated _loadData method as follows:

    JqTreeWidget.prototype._loadData = function(data, parent_node) {
      var n, selected_nodes_under_parent, _i, _len;

      var rootJSON = this.options.rootJSONElement;
      if(rootJSON)
      {
        data = data[rootJSON];
      }

      this._triggerEvent('tree.load_data', {
        tree_data: data
      });
      if (!parent_node) {
        this._initTree(data);
      } else {
        selected_nodes_under_parent = this.select_node_handler.getSelectedNodes(parent_node);
        for (_i = 0, _len = selected_nodes_under_parent.length; _i < _len; _i++) {
          n = selected_nodes_under_parent[_i];
          this.select_node_handler.removeFromSelection(n);
        }
        parent_node.loadFromData(data);
        parent_node.load_on_demand = false;
        this._refreshElements(parent_node.parent);
      }
      if (this.is_dragging) {
        return this.dnd_handler.refreshHitAreas();
      }
    };

Callled in code as follows:

            $('#tree1').tree({
                dataUrl:'*dataurl*',
                rootJSONElement:'BusinessActivities',
            });

This fits our current json returned from the server a snippet below shows the structure:

{
  "ok":true,
  "BusinessActivities":
    [
      {"id":id,"load_on_demand":true,"label":"label"},
      {"id":id,"load_on_demand":false,"label":"label"},
      {"id":id,"load_on_demand":false,"label":"label"},
      ...
    ]
  ...
}

Is this something that could be added to future versions, as I've only developed something for our solution and will need to add again if updating the library in the future.

Thanks for the great library though, well thought out and lightweight.

[mbraak]

Yes, I can see that this solution works in your situation.

Perhaps you could also load the tree using getJSON, and then put the data in the tree.

$.getJSON(
  '/my_data',
  function(data) {
    $('#tree1').tree({
      data: data.BusinessActivities
    });
  }
);

[tonydilger]

thanks, that is how I originally had it implemented.

Problem is I wanted to use "load on demand" where I didn't have the luxury of modifying the data prior to sending it to the tree. Is that possible or should I stick with my current solution for the time being?

[mbraak]

I see. If you use load-on-demand, then you cannot load the data yourself. I guess you should stick to your solution.

[cheton]

I think this is related to the issue https://github.com/mbraak/jqTree/issues/180.

[tonydilger]

Yes #180 would solve this issue when implemented.

[mbraak]

The dataFilter option is now added to the dev branch.