Provide locked column and row headers
Brought to you by:
avix
JPivot should be able to freeze the top row, showing
the measure names. and the left hand columns, showing
the level hierarchies. Larger tables cause these to
scroll off the screen when exploring the far corners of
the table, and it becomes very difficult to understand
what data you are viewing.
This is such a common requirement that I believe JPivot
will be greatly improved by doing this as an option, or
if that is too difficult, then by default. I cannot
imagine anyone complaining about having this feature.
I have locked the header-row by using JQuery. This solution works on firefox and ie. It´s is easys to get the locked header-row in firefox. The table needs to consist of "thead" and "tbody". The tbody-element get a certain height. That´s all in firefox. The solution in IE it´s quiet difficult. I´ve found a solution which uses an css-expression. Check it out:
<script type="text/javascript">
jQuery(document).ready(
function() {
/* Allgemein: Aufteile in THead und TBody */
jQuery("#table01").find("tbody").before("<thead></thead>");
jQuery("#table01").find("tbody").find("tr").not(
jQuery("#table01").find("tbody").find("tr").find("td").parent()).appendTo(jQuery("#table01").find("thead")
);
if(jQuery.browser.msie) {
/* IE: Expression */
jQuery(".JPivotContainer").css("overflow-x", "auto").css("overflow-y", "auto").css("width", "100%");
if(jQuery("#table01").find("tbody")[0].offsetHeight > 420) {
jQuery(".JPivotContainer").css("height", "420px").css("position", "relative");
jQuery("#table01").find("thead").css("background-color", "#EAEFFB");
jQuery("#table01").find("thead").find("tr").css("position", "relative");
jQuery("#table01").find("thead").find("tr").css("z-index", "100");
jQuery("#table01").find("thead").find("tr").each(function (i) {
$(this).style.setExpression("top", "offsetParent.scrollTop");
})
}
jQuery("#table01").css("margin-left", "-2px").css("margin-top", "-2px").css("margin-bottom", "15px");
} else {
/* Firefox: TBody bekommt feste Größe */
if(jQuery("#table01").find("tbody")[0].offsetHeight > 420) {
jQuery("#table01").find("tbody").css("overflow-y", "scroll").css("overflow", "auto").css("height", "420px").css("overflow-x", "hidden");
jQuery("#table01").find("tbody").find("td").css("padding-right", "20px");
}
}
});
</script>