Stylize Your XML With Jquery XML Tree Plugin

- - posted in Technical | Tagged as JQuery, XML, XML Tree | Comments

Recently I came across a beautiful JQuery XML Tree plugin by Mitya

All Credits goes to Mitya for writing the XMLTree plugin.

The script creates the wonderful tree from a specified XML file or from manually-fed XML. Overall this works just fine, When you specify an XML file as input. Frankly? The script has few bugs:
1. Mutliple tree on same page does not work.
2. XML string cannot be fed manually.

It has nice set of callback functions which can be invoked while to play with your XML Tree.

I give a small idea here but head over to ‘Usage and params’ section of Mitya’s website for more detailed explanation.

initializing the XML tree
1
2
3
4
5
<div id="tree"> </div>
new XMLTree({
     fpath: '../somedir/xml.xml',
     container: '#tree'
});

By default the XML will be renedered unexpanded. But You can Render the tree Fully expanded by giving the startExpanded option as ‘true’

initializing the XML tree fully expanded
1
2
3
4
5
6
<div id="tree"> </div>
new XMLTree({
     fpath: '../somedir/xml.xml',
     container: '#tree',
     startExpanded:true
});



But what if your XML is too large and you want to search any particular node or text and open only certain node and not the rest. Well I did it as follows:

I had a search box in my page and on each key press event I am finding that particular element in the tree and expanding. Well thats not as simple as it sounds.

Here is the snippet.

initializing the XML tree
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
.html file
----------
<span style="float:right"> 
<b>Looking for something specific ?   </b>
<input type="text" id="search_input" tabindex="-1" >
</span>

Custom.js
----------
$(document).ready(function() {
  
//LoadXML('XMLHolder','/assets/server.xml');
if ($('#tree').length > 0)
{
  var filepath = '/path to xml'

  $(function() { 
      new XMLTree({fpath: filepath, container: '#tree', startExpanded: true,
      }); 
  
      //alert ($('ul[class="xmltree startExpanded"]').length)
      $('ul[class="xmltree startExpanded"]').prop('id','xmltree');
  });
      
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  //scroll to first child when filtering
  var container = $('body');
        
  $('#search_input').focus().keyup(function(e){
      var filter = $(this).val();
      if (filter) {
        $('#xmltree').find("li:not(:Contains(" + filter + "))").parent().hide();
        $('#xmltree').find("li:Contains(" + filter + ")").parent().show();
        $("#xmltree").find("li:Contains(" + filter + ")").children().show();
        $('#xmltree').highlight(filter);
        
        //scroll to first child when filtering
        var container = $('body');
        var scrollTo = $('#xmltree').children().find("li:Contains(" + filter + ")").first();
        
        console.log(scrollTo);
        container.scrollTop(
              scrollTo.offset().top - container.offset().top + container.scrollTop()
          );
        //scroll to first child when filtering- ends
      }
      else {
        container.offset().top = 0;
        $('#xmltree').find("li").children().slideDown();
        $('#xmltree').unhighlight();
      }
    });
    
    $('#search_input').focus().keydown(function(e){
        $('#xmltree').unhighlight();
    });
 }
});

Try it, type some thing in the box:
Looking for something specific ?

Note: I am using the scrollTo function too, but its not working in all the browsers for some reasons.

Example:1 Using this xml again: Render tree unexpanded(Click on + sign to navigate).

There you have it folks. Shoot your views in the comments, but note I document these posts for my reference and hope that it would help some one else too.

So cheers..