tree menu, checking / uncheching all child items, client side, possible?

[kigoobe]

Hi friends,

I'm having a menu like this -

that I've fetched from the database, using recursive function, where data is stored as - id | title | parent

I need a javascript function, that will help me to check / uncheck child elements (if present) when I click on a parent at different level.

Like,

• if I check / uncheck Test March, all the check boxes should be checked / unchecked.

• If I check / uncheck A scent during sleep, only this title should be checked / unchecked.

• If I check / uncheck Sub March 1, this title and all titles following this should be checked / unchecked.

• If I check / uncheck test sub sub march, the last two should be checked / unchecked.

Wondering, if anyone is having any idea here on how to do this.

Thanks.

[kigoobe]

I thought to give an update here -

At this moment, I'm having a javascript array, having a form id~title~parent -

menuArray["59"] = "174~Test March~1";
menuArray["60"] = "178~A Scent During Sleep~174";
menuArray["61"] = "175~Sub March 1~174";
menuArray["62"] = "208~Sub sub March 2~175";
menuArray["63"] = "209~Sub level 5~208";
menuArray["64"] = "210~Sub level 6~209";
menuArray["65"] = "211~Sub level 7~210";
menuArray["66"] = "207~test Sub Sub March~175";
menuArray["67"] = "229~test Sub March 03-23~207";

Hmmm ... now what ?

Do I need a js recursive function here ?

Conceptually, I need a function here, like -

function check(id, array) {
 for(var i=0;i<array.length;i++) {
  var vArr = array[i].split("~");
  if (vArr[0] == id) {
  newMenu[] = vArr[0];
  check(vArr[2],array); // this doing the recursion, but again, I need 
// something similar in javascript, and what about multiple submenus at 
// the same level, this function will probably take just one line.
  }
 }
}

[kigoobe]

Hi guys

Well, I am storing a multilevel menu in mysql, in the following way.

id | menu_name | parent_id

where, ids are linked to each other with parent_id. ie, if menu_y is a child of menu_x, for menu_y the parent_id would be menu_x's id.

In the webpage, the menu is listed with a check box associated with each menu.

I need to make a javascript array, where all the menu items will be listed along with their id and parent_id. Then, I need a way to figure out a given menu's children and subsequent descendents.

The idea is, once we check / uncheck a check box, all it's descendants get checked / unchecked.

Any tips / hints here friends? Is the recursive thing a possible solution here, that could help me to get all descendents of a menu from it's id?

I had a post earlier on this subject

[kigoobe]

Speaking about the recursive function, here is what I'm using server side, for php ...

[php]
function getNodes($menu_ id, $level = 0, $version='') {
global $myversion;
global $arrCheckMenu;
$sql = "SELECT id, menu_name, parent_menu FROM menu_management WHERE parent_menu='". $menu_id."' AND version = '".$version. "' ORDER BY position";
$result = mysql_query($sq l);
while ($row = mysql_fetch_arr ay($result)) {
if ($row['id']!=1) {
echo '<p><input type="checkbox" name="check_men uid[]" value="'.$row['id'].'">&nbsp;'.str _repeat('&nbsp; »&nbsp;', $level-1).$row['menu_name'].'</p>';
}
getNodes($row['id'], $level+1, $myversion);
}
}
getNodes(0);
[/php]

Probably I need a way to convert this php function to a javascript function, with a modification that instead of printing the checkbox I'll be checking / unchecking it. The function could be called onclick with checkbox ... hmmm ... thinking aloud ...

[acoder]

I had a post earlier on this subject

Merged with the previous thread.

To get all the checkboxes, you can use elem.getElement sByTagName("inp ut") where elem is the parent container containing the checkboxes that you need to access. You would also need to check that the elements are checkboxes by checking type.

One other possibility is to use document.getEle mentsByName() instead and use the name of the set of checkboxes.

[kigoobe]

Thanks acoder ... but the problem is, how to get all child elements recursively !!!

[acoder]

For recursion to work, it needs to have an end case where it can stop.

Am I correct in assuming that no parent id is greater than the menu id, e.g. a menu has an id of, say, 175. Its parent id cannot be greater than 175?

[kigoobe]

thanks again, acoder. Actually, no. A menu can have a parent_id which is greater than it's id. Because, id is getting attributed when a menu is getting created, and at that given point it's parent is always smaller than it's id.

However, when we are moving individual menu items to reorganize the menu, we can easily place a menu created earlier as a child of a menu created later.

Does this makes the task more difficult? To get the end, we can either start from zero (telling that's the end), or can loop through a javascript array (where we can store all data collected using php on page load) to find the maximum number.

What is your suggestion here ?

[acoder]

No, I was thinking in terms of efficiency, but here is a better idea. Earlier, you posted this:

At this moment, I'm having a javascript array, having a form id~title~parent -

menuArray["59"] = "174~Test March~1";
menuArray["60"] = "178~A Scent During Sleep~174";
menuArray["61"] = "175~Sub March 1~174";
menuArray["62"] = "208~Sub sub March 2~175";
menuArray["63"] = "209~Sub level 5~208";
menuArray["64"] = "210~Sub level 6~209";
menuArray["65"] = "211~Sub level 7~210";
menuArray["66"] = "207~test Sub Sub March~175";
menuArray["67"] = "229~test Sub March 03-23~207";

How about changing it to:

menuArray[174][0] = "Test March";
menuArray[174][1] = 1;
menuArray[178][0] = "A Scent During Sleep";
menuArray[178][1] = 174;

and so on. This avoids having to split the string to get the values.

A tree-based store would be better, but if we're using an array, we need to get all the children and their children. A function could get the children by checking the parent id of each array item. If it matches, then get its children too. The recursion would stop when there are no children.

[kigoobe]

Thanks ... so first I work on to make the first function to make the changed array, and then a second function for the rest ...

thanks ... let's see how far I can go with this wisdom ... :)