Freeze column and fixed header in Table or GridView
- Default scrollbar of browser
- Freeze Header, Column, Footer (only last row)
- Download the latest release from GitHub
- Include the
gridviewscroll.js
in web page
<script type="text/javascript" src="js/gridviewscroll.js"></script>
- Initialize table with options, then call
enhance
<script type="text/javascript">
window.onload = function () {
var gridViewScroll = new GridViewScroll({
elementID : "gvMain" // Target element id
});
gridViewScroll.enhance();
}
</script>
<script type="text/javascript">
var gridViewScroll = new GridViewScroll({
elementID : "", // String
width : 700, // Integer or String(Percentage)
height : 350, // Integer or String(Percentage)
freezeColumn : false, // Boolean
freezeFooter : false, // Boolean
freezeColumnCssClass : "", // String
freezeFooterCssClass : "", // String
freezeHeaderRowCount : 1, // Integer
freezeColumnCount : 1 // Integer
});
</script>
<script type="text/javascript">
var gridViewScroll = new GridViewScroll({
elementID : "gvMain",
});
gridViewScroll.enhance(); // Apply the gridviewscroll features
gridViewScroll.undo(); // Undo the DOM changes, And remove gridviewscroll features
</script>
- Internet Explorer 9+
- Google Chrome (61.0.3163.100)
- Mozilla FireFox (56.0.2)
- Testing tool - Paste your table and styles to test gridviewscroll.
If you have any question with gridviewscroll welcome to filing an issue on GitHub, I will try my best to help.
Or you can send email to twlikol@msn.com.
Copyright © Likol Lee. Licensed under the MIT license.
This version is no longer supported, you can find in link: https://github.com/twlikol/GridViewScroll/tree/v0.9.6.8