Author: | twlikol |
---|---|
Views Total: | 22,465 views |
Official Page: | Go to website |
Last Update: | November 13, 2017 |
License: |
Preview:

Description:
GridViewScroll.js is an easy-to-use JavaScript plugin which makes any number of table columns and rows to be fixed in place as you scroll.
How to use it:
Import the ‘GridViewScroll.js’ script into the html file.
<script src="js/gridviewscroll.js"></script>
Add the ‘GridViewScrollHeader’ class to the table header which should be frozen on scroll.
<tr class="GridViewScrollHeader"> <th>StandardCost<br/>123</th> <th>ListPrice</th> <th>SafetyStockLevel</th> <th>SellStartDate</th> <th>SellEndDate</th> <th>ModifiedDate</th> <th>ProductID</th> <th>Name</th> <th>Number</th> <th>ReorderPoint</th> <th>Weight</th> </tr>
Add the ‘GridViewScrollItem’ to the table rows.
<tr class="GridViewScrollItem"> <td>747</td> <td>HL Mountain Frame - Black, 38</td> <td>FR-M94B-38</td> <td>375</td> <td>2.68</td> <td>739.0410</td> <td>1349.6000</td> <td>500</td> <td>7/1/2001 12:00:00 AM</td> <td> </td> <td>3/11/2004 10:01:36 AM</td> </tr> ...
Config the GridViewScroll.js.
var options = new GridViewScrollOptions(); options.elementID = "myTable"; options.width = 450; options.height = 300; options.freezeColumn = true; options.freezeFooter = true; options.freezeColumnCssClass = "GridViewScrollItemFreeze"; options.freezeFooterCssClass = "GridViewScrollFooterFreeze"; options.freezeColumnCount = 2;
Attach the GridViewScroll to the html table. Done.
new GridViewScroll(option);
This is a good way BUT one thing you did not consider is cells with long data content. Your script breaks for that case. Consider wrapping the text in case the content width is larger than half of grid width.