Dynamic Treeview PHP

Question

I want to make a dynamic populated treeview from mysql database in PHP. I have searched a lot for that, but i haven't got the solution yet (jquery treeview seems not working in my context).

And i want to realize is that i extend the treeview by clicking the "+" sign.

When i click the item of the treeview, it will execute a query and display the result in the same page.

Do you know how to realize it?

Thanks in advance.

@Daff, i want the jQuery treeview get the data from the database, but as for now, i can't find it. And then, i need to make query by clicking the item of the tree. Do you know how to do that? — SUN Jiangong
– SUN Jiangong, Commented Jan 22, 2010 at 8:43

hsz · Accepted Answer · 2010-01-22 09:44:26Z

1

Try with <ul> <li> nesting. If level > 1, hide it with CSS and add + element. With JavaScript add event to + which will show you this nearby <ul> container.

Edit:

<ul>
  <li>
    <a href="#">+</a>
    Element A
    <ul class="hide">
      <li>Subelement AA</li>
      <li>Subelement AB</li>
      <li>Subelement AC</li>
    </ul>
  </li>
  <li>Element B</li>
    <a href="#">+</a>
    Element C
    <ul class="hide">
      <li>Subelement CA</li>
      <li>
        <a href="#">+</a>
        Subelement CB
        <ul class="hide">
          <li>Subelement CBA</li>
          <li>Subelement CBB</li>
          <li>Subelement CBC</li>
          <li>Subelement CBD</li>
        </ul>
      </li>
      <li>Subelement CC</li>
    </ul>
  <li>Element D</li>
</ul>

edited Jan 22, 2010 at 9:44

answered Jan 21, 2010 at 16:24

hsz

153k63 gold badges268 silver badges320 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SUN Jiangong Over a year ago

i've not implemented it, can you explain more about it? I don't know how to add "+" element.

Martin Bean · Accepted Answer · 2010-01-21 16:29:40Z

0

I have this functionality in my bespoke CMS.

I have one PHP function that simple queries the database and uses recursion. The first parameter passed to this function is the parent, which defaults to 0.

So when the function is called, it queries the database for all pages with a parent value of 0.

When looping over the result set, the function checks if there are any pages with a parent value of that page's ID. If so, it starts a new list and pulls records that are children of that particular page.

The above sets up a recursive function, which outputs a multiple-level <ul>. I then use a jQuery plug-in to transform this list into a file tree, with + / - icons to toggle branches and file type icons.

I hope this helps.

answered Jan 21, 2010 at 16:29

Martin Bean

39.6k28 gold badges134 silver badges207 bronze badges

4 Comments

SUN Jiangong Over a year ago

@Martin, Thanks, i think it's a nice idea. But what i do here is to making queries in database, return the result set in the same page. Actually, it's a little hard for me to understand your answer.

Martin Bean Over a year ago

I've just re-read your original question. Are you saying you wish for lazy loading of tree branches with AJAX? It's a nice idea in terms of cutting your initial page load, but what benefits does it have? What about users with JavaScript disabled, or what happens if your script times out?

SUN Jiangong Over a year ago

@thanks, i want a lazy loading of tree with AJAX, because i need it to be dynamic. And i haven't considered the condition of not supporting JavaScript. And what's your plan for degradation?

Martin Bean Over a year ago

Well I've already given you my solution. AJAX and JavaScript should be used to enhance the user's experience, not make functionality.

Collectives™ on Stack Overflow

Dynamic Treeview PHP

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related