Freeze Table Rows And Columns With JavaScript – GridViewScroll.js

Author
In Articles, Sticky Header Nov 13, 2017
Freeze Table Rows And Columns With JavaScript – GridViewScroll.js

GridViewScroll.js is an easy-to-use JavaScript plugin which makes any variety of desk columns and rows to be mounted in place as you scroll.

How you can use it:

Import the ‘GridViewScroll.js’ script into the html file.

<script src="https://www.cssscript.com/js/gridviewscroll.js"></script>

Add the ‘GridViewScrollHeader’ class to the desk header which must 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>Identify</th> <th>Quantity</th> <th>ReorderPoint</th> <th>Weight</th> </tr>

Add the ‘GridViewScrollItem’ to the desk rows.

<tr class="GridViewScrollItem"> <td>747</td> <td>HL Mountain Body - 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>&nbsp;</td> <td>three/11/2004 10:01:36 AM</td> </tr> ...

Config the GridViewScroll.js.

var choices = new GridViewScrollOptions(); choices.elementID = "myTable"; choices.width = 450; choices.top = 300; choices.freezeColumn = true; choices.freezeFooter = true; choices.freezeColumnCssClass = "GridViewScrollItemFreeze"; choices.freezeFooterCssClass = "GridViewScrollFooterFreeze"; choices.freezeColumnCount = 2;

Connect the GridViewScroll to the html desk. Completed.

new GridViewScroll(possibility);

The put up Freeze Desk Rows And Columns With JavaScript – GridViewScroll.js appeared first on CSS Script.

Supply hyperlink

Leave a Reply

Your email address will not be published. Required fields are marked *