Computer Part Sales Company - Conceptualizing

Suite and Optimus Suite 5
#1

Hi there, I work for a computer sales and service company and I’m using the tree for the admin portion of our website to handle sorting parts into headings. (Think a smaller version of newegg) The database is already set up (and has been for years now, I’m just streamlining the admin side of things to speed up product updating/adding. As for my question, All our products are listed under headings (henceforth: H1 H2 H3). A product may be listed directly under H1 or it may be found under H1>H2 or under H1>H2>H3 or finally, under H1>H3. (H1 is required always, H2 and H3 aren’t required.) Below is a sample of what it may look like:

ACCESSORIES(H1)
  product
  product
  MOUSE PADS(H2)
    product
    GAMING MOUSE PADS(H3)
      product
      product
      product
      product
LAPTOPS(H1)
  TABLETS(H3)
    product
    product
    product

I mainly have everything set up, all products have a product icon and cannot have children and all categories have a category icon with children. I can edit, delete and add categories as well as delete products (I have a seperate page for edit+add+deletion of products).

There are several things I need to do and I’m not sure how to go about doing it, maybe someone can point me in the right direction.

1 - As I stated before, a product can only have a heading as far as 3 (H3) this means that including the root node, my max indentation is set at 5 (h3 being the 4th indentation which in turn can support products - making it 5 indents). When all three headings are present it’s easy to stop someone from adding a category under an H3, the tree just natrually stops them. However, using the example above, the user would be allowed to add a category under ‘TABLETS’ because it’s only 2 steps down but since it’s an H3 I don’t want them to be able to. How can I check this? If it makes things easier, the ID’s of H’s are: h1_$id, h2_$id, h3_$id. Is there an event I can call on drag? And if so which one would it be?

2 - What would be the easiest/best way to save the changes? Should I call an ajax function after every move, edit, delete or should I traverse through the resulting xml after the user presses a ‘save’ button?

3 - Some headings have an ‘&’ symbol and thus when I click on a heading to edit it the resulting edit box becomes populated with ‘&’, how can I remove this?

Thanks alot in advance and sorry for being so long winded.

#2

There is the onDrag event, which can be used to control d-n-d

tree.attachEvent("onDrag",function(sid,tid){ if (some_check(sid)) return false; return true; })

What would be the easiest/best way to save the changes?
Simplest way is serialize all data to the xml and send it back to the server , after all updates are implemented ( ajax call for each action is also a possible solution, but will require a more complicated logic on the server side )

#3

Some headings have an ‘&’ symbol and thus when I click on a heading

tree.attachEvent("onEdit", function(stage, id, value){ if (stage == 0) return value.replace("&",""); if (stage == 2) return value.replace("&","&"); });

#4

Thanks alot for all your help, I got everything sorted and I have a few hundred lines of extra handlers + functions for my tree and it’s working great! Seems that I missed the event handlers page when I first read through the documentation hence my questions.