Freeze Table Rows And Columns With JavaScript – GridViewScroll.js

Author
In CSS Tutorial Nov 13, 2017
Freeze Table Rows And Columns With JavaScript – GridViewScroll.js

Freeze Table Rows And Columns With JavaScript: The 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.

It is easy to work and make customization. It is a small javascript file which do all you need. You have to simply place the file in before closing header and then define table as example below.

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);

 

Leave a Reply

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