[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Need to create a Javascript multi-dimensional tree from an array.

Posted on 2011-10-29
8
Medium Priority
?
246 Views
Last Modified: 2012-05-12
So 3 days in now and i'm totally at a loss for what to do... as far as my skills i'm an adept when it comes to messing with arrays but not so good with objects. Hoping to find an array based solution.

I need to create a multi-dimensional tree from an array or arrays...

Display Example: + is maximized, - is minimized, [ ] is a form check box
+ Colors I want
   [ ] Blue
   [ ] Yellow
   + Special
       [ ] Purple
- Price Range
- Distance

I can handle the easy stuff such as show/hide and dynamically creating the html through loops but I just have no idea how to set up the array so it's easy to loop through to produce this tree. Any ideas?
0
Comment
Question by:GrrWolfie
  • 4
  • 3
8 Comments
 
LVL 9

Accepted Solution

by:
djon2003 earned 2000 total points
ID: 37051508
Here is an example of data.
 
var myArray = 
[
{name : "Colors", show : true, children :

   [
    {name : "Blue", show : true, children : []},
    {name : "Yellow", show : true, children : []},
    {name : "Special", show : true, children : 
      [
        {name : "Purple", show : true, children : []}
      ]
    }
   ]

},
{name : "Price range", show : false, children : 
  [
    {name : "Low", show : false, children : []}
  ]
},
{name : "Distance", show : false, children : []}
];

Open in new window


Here is an example of code loop it.
 
createList(myArray);

function createList(nodes) {
   for(var i = 0; i < nodes.length; i++) {
       //Do something  with nodes[i].name and other values

      if (nodes[i].children.length != 0) createList(nodes[i].children);
   }
}

Open in new window

0
 

Author Comment

by:GrrWolfie
ID: 37051878
Thanks djon, i'm gonna go look into this tomorrow, long day :P
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37052075

//Try plugging this into the following tree control

                  children: [
                        {title: "Colours", isFolder: true, key: "colours", hideCheckbox: true, expand: true,
                              children: [
                                    {title: "Blue"},
                                    {title: "Yellow"},
                                    {title: "Special", isFolder: true, key: "special", hideCheckbox: true, expand: true,
                                          children: [
                                                {title: "Purple"}
                                          ]
                                    }
                              ]
                        },
                        {title: "Price Range", isFolder: true, key: "range", hideCheckbox: true, expand: false,
                              children: [{title: "Placeholder"}]
                        },
                        {title: "Distance", isFolder: true, key: "distance", hideCheckbox: true, expand: false,
                              children: [{title: "Placeholder"}]
                        }
                  ]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27421997.html</title>
 
	<script src="http://wwwendt.de/tech/dynatree//jquery/jquery.js" type="text/javascript"></script>
	<script src="http://wwwendt.de/tech/dynatree//jquery/jquery-ui.custom.js" type="text/javascript"></script>
	<script src="http://wwwendt.de/tech/dynatree//jquery/jquery.cookie.js" type="text/javascript"></script>
 
	<link href="http://wwwendt.de/tech/dynatree//src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
	<script src="http://wwwendt.de/tech/dynatree//src/jquery.dynatree.js" type="text/javascript"></script>
 
 
	<!-- Add code to initialize the tree when the document is loaded: -->
	<script type="text/javascript">
	jQuery(document).ready( function(){
		// Attach the dynatree widget to an existing <div id="tree"> element
		// and pass the tree options as an argument to the dynatree() function:
		$("#tree").dynatree({
			checkbox: true,
			onActivate: function(node) {
				// A DynaTreeNode object is passed to the activation handler
				// Note: we also get this event, if persistence is on, and the page is reloaded.
				alert("Click checkbox to select: " + node.data.title);
			},

			children: [
				{title: "Colours", isFolder: true, key: "colours", hideCheckbox: true, expand: true,
					children: [
						{title: "Blue"},
						{title: "Yellow"},
						{title: "Special", isFolder: true, key: "special", hideCheckbox: true, expand: true,
							children: [
								{title: "Purple"}
							]
						}
					]
				},
				{title: "Price Range", isFolder: true, key: "range", hideCheckbox: true, expand: false,
					children: [{title: "Placeholder"}]
				},
				{title: "Distance", isFolder: true, key: "distance", hideCheckbox: true, expand: false,
					children: [{title: "Placeholder"}]
				}
			]

		});
	});
	</script>
</head>
<body class="example">

	<div id="tree"> </div>
 
</body>
</html>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:GrrWolfie
ID: 37054508
Proculopsis, thanks for the input! Should have mentioned i'm definitely not looking for a jQuery option :)

(substituting [ with | because it won't let me post to the forum otherwise)

djon2003, now working on your script to make sure it's all I need (looks good so far), gotta brush on some learning so I can best make use of "//Do something  with nodes|i].name and other values" lol.

Right now i'm just doing document.write(nodes|i].name) or document.write(nodes|i].show), what would be the command to see how many "parents" the node has so I can indent it accordingly? If I have more complicated questions i'll create a new experts-exchange listing because it goes beyond the intended scope of this question into newbie learning territory. :P
0
 

Author Comment

by:GrrWolfie
ID: 37054531
Got a question, what'd be the best way to depict if an item is a folder or a file in your opinion?
0
 
LVL 9

Expert Comment

by:djon2003
ID: 37054708
Well, you could add an attribute for each of them ( as folder: true or false), though i think you can deduce it from the actual children attribute.

Using children.length == 0 would mean a folder.  
0
 
LVL 9

Expert Comment

by:djon2003
ID: 37054769
For the indentation problem, you can fix this out by adding a parameter to the function createList.

Let's change the show attribute in the data to expand. Though show could be used too to ensure creation. This could be used by filters to activate / desactivate data dynamically. So the new data would be :
 
var myArray = 
[
{name : "Colors", expand : true, children :

   [
    {name : "Blue", expand : true, children : []},
    {name : "Yellow", expand : true, children : []},
    {name : "Special", expand : true, children : 
      [
        {name : "Purple", expand : true, children : []}
      ]
    }
   ]

},
{name : "Price range", expand : false, children : 
  [
    {name : "Low", expand : false, children : []}
  ]
},
{name : "Distance", expand : false, children : []}
];

Open in new window


Let's write something quick in JS.
 
var divContainer = document.getElementById('container');

divContainer.innerHTML = createList(myArray);

function createList(nodes, parent, level) {
   if (level == "undefined") level = 1;
   //Missing an id to be refereed by the expand button to change style.display
   var html = "<ul" + (parent != "undefined" && !parent.expand ? ' style="display:none"' : "" ) + ">";

   for(var i = 0; i < nodes.length; i++) {
       //Do something  with nodes[i].name and other values
      html += "<li>";
      if (nodes[i].children.length != 0) {//Add expand button}

      html += nodes[i].name;

      if (nodes[i].children.length != 0) html += createList(nodes[i].children, nodes[i], level + 1);

      html += "</li>";
   }

   html += "</ul>";

   return html;
}

Open in new window


This list is using the ul, li and embedded ul to create indentation. Though, I added a level param to show you that you could use something else. Example : Using the level as a multiplier to set the left padding of all your elements.

This could be done in multitude of ways. Analyse what's your needs are and try to figure out the way it should work and how data show be designed.

More, you can assign a function into value of an object's attribute. This can be used to get different functionality by object type. So, the main createList function can call this attribute's function to get the specific html needed for that object.

Example :
var obj= {name: 'Data1', getHtml: function() {return "<b>test</b>";}};
alert(obj.getHtml());

The function could be defined outside and using only its name as reference into the data.
0
 

Author Closing Comment

by:GrrWolfie
ID: 37055669
djon2003, thanks again i'm lucky to have you help me out here. :)

I have some basic JavaScript knowledge questions but they're outside the scope of this thread. Will ask them tomorrow. Have a good one!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question