treeview/hierarchy structure in wordpress

Question

could anybody suggest solution how to display data in treeview like format in wordpress. There is no plugin for that.

I want to display something like table of content. Not talking about pages/categories from wordpress itself.

I found

• this jQuery plugin that can be used to display my data. I cannot edit and store data using this plugin though.
• jsTree - a javascript based, cross browser tree component. It is packaged as a jQuery plugin. This looks very promising.

Very important part of the whole solution is how to store the source data of the tree (database or xml ?) and how to update the source data. I found this article very useful.

I am looking for a solution that would let me to display the data and preferably also edit/store them. Editing needs to be available only for admin users.

Answer 1

You could store data with a left and right property:

12345678901234
-------------- | a
 ------------  | b
  ---- -- --   | c d e
   --          | f

a.left = 1, a.right = 14
b.left = 2, b.right = 13
c.left = 3, c.right = 6
d.left = 8, d.right = 9
e.left = 11, e.right = 12
f.left = 4, f.right = 5

This would give you a tree like:

          a
          |
          b
         /|\
        / | \
       c  d  e
      /
     f

This is a quite tricky solution, but it uses a minimum of queries to select a tree. You can read how to insert, update and delete nodes on mysql.com.

Another simple solution is to give each node a parent property, and start a recursive loop through each of these nodes. This solution is a very expensive one, it uses one query for every node.

Answer 2

Set each node up as a Wordpress page, then use wp_list_pages to output a set of nested <li> elements.

For instance, with the structure

nodes (page id #34)
- category 1
-- subcategory 1
-- subcategory 2
- category 2
-- subcategory 3
-- subcategory 4

Use:

<ul>
<?php wp_list_pages('child_of=34'); ?>
</ul>

Answer 3

The simpliest solution is wp_list_pages() it's gonna output you a ul li list of all your page.

if you want to export it as a xml you can make a template page in wordpress that make a xml.

--updated--

@rafik
can you tell me exactly... what you want to do and where.

Because all the link that you put... tell me that we just overkill you're question. :)

Do you just want to display a list like a tree view in a wordpress page?...

If yes the simpliest way to do this is to make a ul li list like this:

<ul id="treeview">
  <li>parent1</li>
  <li>parent2  
    <ul>
      <li>child1 of 2</li>
      <li>child2 of 2</li>
    </ul>
  </li>
</ul>

and in your jquery script:

$(function () { 
  $("#treeview").tree();
});