by Ashwani Kumar
-
-
posted in
Technical
|
Tagged as
XML,XMLTree,JQuery
| 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
12345
<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'
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.
.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.
