Bad performance of stretching nodes in an HTML Treeview
I've created an HTML treeview which behaves similar to the solution
explorer in Visual Studio 2012 where every node of the tree is stretched
to fill the remaining space of its container as you can see on this
picture:
In order to achieve this behaviour, I am creating an unordered list with
Javascript to populate my tree - the DOM structure looks something like
this:
<ul>
<li>
<input type="checkbox" id="node_xy" />
<label for="node_xy" /> <!-- expand/collapse button -->
<a href="javascript:nodeClickHandler();"> <!-- node text --> </a>
<ul>
<!-- subtree with li elements... -->
</ul>
</li>
</ul>
After populating the tree, I am using Javascript (jQuery) to adjust the
width of every node to fill the remaining space of its container. The
container width is fixed but it is scrollable (like in Visual Studio), so
I have to do the same width adjustments when the user expand or collapse
nodes in the tree because it is possible that the maximum width of the
tree is changed. This width adjustment part of the code looks like this:
updateLayout: function (containerWidth) {
var self = $(this);
self.find('.treeview a').css('width', ''); /* remove the width
property for the next calculation */
var maxAWidth = $('.treeview a').max(function () {
return $(this).offset().left + $(this).outerWidth();
});
var targetWidth = containerWidth || $('.treeview').width();
targetWidth = Math.max(targetWidth, maxAWidth);
$('.treeview a').each(function () {
var left = $(this).offset().left;
$(this).outerWidth(targetWidth - left);
});
}
And it works fine, but it gets very slow when there are a lot of (few
hundred or a thousand) nodes in the tree and the user wants to expand or
collapse a node. The performance is so bad in these cases because
updateLayout traverses the full DOM tree under my treeview. I'm wondering
is there any other solution for this "stretching" problem which doesn't
use this kind of traversing? It would be good if I could solve this
problem with some kind of pure CSS-magic, but it doesn't seem to be
possible at all...
No comments:
Post a Comment