Congelar filas y columnas de tabla con JavaScript-GridViewScroll. js

Vista prévia

Descripción

GridViewScroll. js es un plugin de JavaScript fácil de usar que hace que cualquier número de columnas de la tabla y filas se corrigen en su lugar a medida que se desplaza.

Funcionamiento

Importe el script ' GridViewScroll. js ' en el archivo HTML.

<script src="js/gridviewscroll.js"></script>

Agregue la clase ' GridViewScrollHeader ' al encabezado de la tabla que se debe congelar en el desplazamiento.

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

Agregue el ' GridViewScrollItem ' a las filas de la tabla.

<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>&nbsp;</td>

<td>3/11/2004 10:01:36 AM</td>
</tr>

...

Config el 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;

Adjunte GridViewScroll a la tabla HTML. Hecho.

new GridViewScroll(option);