Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I'll start with <a href="https://stackoverflow.com/a/15925282/460368">the code I've done on your previous question</a> and modify it as below (link to the new fiddle in the end of this answer) :</p> <p>JS : </p> <pre><code>var xml = "&lt;root&gt; \ &lt;method name='A'&gt; \ &lt;childcall name='B'&gt;&lt;/childcall&gt; \ &lt;childcall name='C'&gt;&lt;/childcall&gt; \ &lt;/method&gt; \ &lt;method name='B'&gt; \ &lt;childcall name='D'&gt;&lt;/childcall&gt; \ &lt;/method&gt; \ &lt;method name='C'&gt; \ &lt;childcall name='D'&gt;&lt;/childcall&gt; \ &lt;childcall name='E'&gt;&lt;/childcall&gt; \ &lt;/method&gt; \ &lt;/root&gt;"; var data = $.parseXML(xml); console.log(data); var curLi = []; $(data).find('method').each(function(){ var hasChild = $(this).children('childcall').length &gt; 0; curLi.push('&lt;li'); curLi.push(((hasChild) ? ' class="category plusimageapply"&gt;': '&gt;')); curLi.push($(this).attr('name')); if(hasChild){ curLi.push('&lt;ul&gt;'); $(this).children('childcall').each(function(){ var name = $(this).attr('name'); curLi.push('&lt;li&gt;&lt;a href="'+name+'"&gt;'+name+'&lt;/a&gt;&lt;/li&gt;'); }); curLi.push('&lt;/ul&gt;'); } curLi.push('&lt;/li&gt;'); }); $('#test').append(curLi.join('')); $('li.category').click(function(event){ if($(this).is('.plusimageapply')) { $(this).children().show(); $(this).removeClass('plusimageapply'); $(this).addClass('minusimageapply'); } else { $(this).children().hide(); $(this).removeClass('minusimageapply'); $(this).addClass('plusimageapply'); } }); </code></pre> <p>HTML :</p> <pre><code>&lt;ul id="test"&gt; &lt;/ul&gt; </code></pre> <p><a href="http://jsfiddle.net/dujRe/9/" rel="nofollow noreferrer">http://jsfiddle.net/dujRe/9/</a></p> <hr> <h2>EDIT</h2> <p>Alright, I thought you were talking about physical expansion - as every child must be displayed.</p> <p>For your tree you can do this :</p> <p>JS :</p> <pre><code>var data = $.parseXML(xml); var curLi = []; function parseBranch(l){ var b = $(data).find('method[name='+l+']'); if(b.length &gt; 0){ curLi.push('&lt;ul&gt;'); } b.each(function(){ $(this).children('childcall').each(function(){ var name = $(this).attr('name'); curLi.push('&lt;li&gt;&lt;a href="'+name+'"&gt;'+name+'&lt;/a&gt;'); parseBranch(name); // recursion here curLi.push('&lt;/li&gt;'); }); }); if(b.length &gt; 0){ curLi.push('&lt;/ul&gt;'); } } $(data).find('method').each(function(){ var hasChild = $(this).children('childcall').length &gt; 0; curLi.push('&lt;li'); curLi.push(((hasChild) ? ' class="category plusimageapply"&gt;': '&gt;')); curLi.push($(this).attr('name')); if(hasChild){ curLi.push('&lt;ul&gt;'); $(this).children('childcall').each(function(){ var name = $(this).attr('name'); curLi.push('&lt;li&gt;&lt;a href="'+name+'"&gt;'+name+'&lt;/a&gt;'); parseBranch(name); curLi.push('&lt;/li&gt;'); }); curLi.push('&lt;/ul&gt;'); } curLi.push('&lt;/li&gt;'); }); $('#test').append(curLi.join('')); $('li.category').click(function(event){ if($(this).is('.plusimageapply')) { $(this).children().show(); $(this).removeClass('plusimageapply'); $(this).addClass('minusimageapply'); } else { $(this).children().hide(); $(this).removeClass('minusimageapply'); $(this).addClass('plusimageapply'); } }); </code></pre> <p><a href="http://jsfiddle.net/dujRe/10/" rel="nofollow noreferrer">http://jsfiddle.net/dujRe/10/</a></p>
    singulars
    1. This table or related slice is empty.
    1. POTraverse xml recursively with JQuery
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USShikiryu
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POTraverse xml recursively with JQuery
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTBountyClose
    1. COhi Shikiryu, but this code does not expand that way I have specified in the output. The expansion should go down to the last child. I suppose it would require recursive code. Since I am new to JQuery I am finding it bit difficult to get the code in place.
      singulars
      1. PO
      1. USuser32262
    2. CO@user32262 I think I didn't understand what you meant about "expand". Now I think I got it ;)
      singulars
      1. PO
      1. USShikiryu
    3. COThanks Shikiryu. The expansion is correct now. But initially all parent nodes must be collapsed. And one click should expand one level down. So, click on A should show B and C, then click on B should show D and the click on D should show F. So expanding one node in one click. And I don't need the hrefs anyway. I also came up with a recursive solution but haven't got the display and expansion working. Maybe I ll post that. Eventually I will accept your answer.
      singulars
      1. PO
      1. USuser32262
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload