AUI:TreeView - how to dynamically create the tree with json

[Rovere Li, modificado hace 9 años.]

Hello All,
I am currently using the AUI:TreeView to create my navigation (tree), can you please advise how do AUI:TreeView work with JSON to dynamically create the navigation? My Json data is:
[{"pid":"1","code":null,"name":"test 1","parentId":null},{"pid":"2","code":null,"name":"test 2","parentId":"1"},{"pid":"3","code":null,"name":"test 3","parentId":"2"},{"pid":"4","code":null,"name":"test 4","parentId":"1"},{"pid":"5","code":null,"name":"test 5","parentId":"1"},{"pid":"6","code":null,"name":"test 6","parentId":null},{"pid":"7","code":null,"name":"test 7","parentId":"6"},{"pid":"8","code":null,"name":"test 8","parentId":null},{"pid":"9","code":null,"name":"test 9","parentId":"8"},{"pid":"10","code":null,"name":"test 10","parentId":"8"},{"pid":"11","code":null,"name":"test 11","parentId":null}]

A sample will be very helpful.

Thanks in advance,
Rovere

[Byrån Zaugg, modificado hace 9 años.]

You're going to need to reformat your JSON. Either before you get it (by the provider) or before you add it to the TreeView children.

WARNING: This is just a rough idea. This doesn't actually work and has flaws. You'll need to do the heavy lifting.

See working TreeView demos here: http://alloyui.com/examples/tree/real-world/

var jsonInput = [
  // ...
];

var treeChildrenConfig = [];

function translateJSON(json) {
  for(var i = 0; i < json.length; i++) {
    var obj = json[i];

    var node = returnNode(treeChildrenConfig, obj.id);
    var nodeParent = returnNode(treeChildrenConfig, obj.parentId);

    if (!node) {
      if (!obj.parentId) {
        // Create new root parent.
        pushNode(treeChildrenConfig, obj);
      }
      else if (nodeParent) {
        // Add node to parent.
        pushNode(nodeParent.children, obj);
      }
      else {
        // Nowhere to put node.
        // Iterate again as new parents may have been added.
        translateJSON(json)
      }

      // Remove node from JSON.
      json.splice(i, 1); //This will mess up the loop.
    }
  }
}

function pushNode(config, obj) {
  config.push(
    {
      lable: obj.name,
      id: obj.id,
      children: []
    }
  );
}

function returnNode(treeChildrenConfig, nodeId) {
  // Finds a node in the tree config.
  // Returns null if node isn't found.
}

translateJSON(json);

[Byrån Zaugg, modificado hace 9 años.]

There are also third-party utilities for this.
http://joelvanhorn.com/2012/01/05/easily-reformat-json-with-json2json/

[Rovere Li, modificado hace 9 años.]

Thanks Byran. I'm not sure if AUI provides the similiar solution like JQuery Ztree so that the AUI Tree will take care the rendering of json data via Ajax, and we will just need to provide the data. Do you have any ideas?

Best Regards,

Rovere

[Byrån Zaugg, modificado hace 9 años.]

Rovere Li:

Thanks Byran. I'm not sure if AUI provides the similiar solution like JQuery Ztree so that the AUI Tree will take care the rendering of json data via Ajax, and we will just need to provide the data. Do you have any ideas?

Best Regards,

Rovere

I don't understand what you're asking.

[Madhava Venganapalli, modificado hace 9 años.]

hi,
Just create one div as bellow.
<div id='xxx_Tree'></div>

and write code as below to get selected value.

<script>
Liferay.provide(
window,
'getCheckedElement',
function(product_configurator_tree) {
var nodeList = new Array();
nodeList = product_configurator_tree.getChildren(true);

for( var i = 0 ; i < nodeList.length ; i++){
if((nodeList.isChecked() == "true" || nodeList.isChecked() == true) ){
if(selectedOrg == ""){
selectedOrg = nodeList.get("label");
}else {
selectedOrg = selectedOrg +","+nodeList.get("label");
}
}
}
document.getElementById('checkedOrg').value = selectedOrg;
});
</script>


You an refer bellow links.
http://alloyui.com/examples/tree/
http://yuilibrary.com/gallery-archive/gallery/show/aui-tree-view.html