Questa è davvero una cosa difficile avere un'intestazione appiccicosa sul tuo tavolo. Avevo gli stessi requisiti, ma con asp: GridView e poi ho trovato davvero pensato di avere un'intestazione appiccicosa su gridview. Ci sono molte soluzioni disponibili e mi ci sono voluti 3 giorni per provare tutte le soluzioni, ma nessuna di esse è stata soddisfacente.
Il problema principale che ho dovuto affrontare con la maggior parte di queste soluzioni era il problema dell'allineamento. Quando si tenta di rendere mobile l'intestazione, in qualche modo l'allineamento delle celle di intestazione e delle celle del corpo non riesce.
Con alcune soluzioni, ho anche avuto il problema di sovrapporre l'intestazione alle prime righe del corpo, causando che le righe del corpo si nascondessero dietro l'intestazione mobile.
Quindi ora ho dovuto implementare la mia logica per raggiungere questo obiettivo, anche se non la considero una soluzione perfetta, ma potrebbe anche essere utile per qualcuno,
Di seguito è riportata la tabella di esempio.
<div class="table-holder">
<table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
<thead>
<tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
<tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
<tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
<tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
<tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
<tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
<tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
<tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
<tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
<tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
</tbody>
</table>
</div>
Nota : la tabella è racchiusa in un DIV con attributo class uguale a 'table-holder'.
Di seguito è riportato lo script JQuery che ho aggiunto nell'intestazione della mia pagina html.
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//create var for table holder
var originalTableHolder = $(".table-holder");
// set the table holder's with
originalTableHolder.width($('table', originalTableHolder).width() + 17);
// Create a clone of table holder DIV
var clonedtableHolder = originalTableHolder.clone();
// Calculate height of all header rows.
var headerHeight = 0;
$('thead', originalTableHolder).each(function (index, element) {
headerHeight = headerHeight + $(element).height();
});
// Set the position of cloned table so that cloned table overlapped the original
clonedtableHolder.css('position', 'relative');
clonedtableHolder.css('top', headerHeight + 'px');
// Set the height of cloned header equal to header height only so that body is not visible of cloned header
clonedtableHolder.height(headerHeight);
clonedtableHolder.css('overflow', 'hidden');
// reset the ID attribute of each element in cloned table
$('*', clonedtableHolder).each(function (index, element) {
if ($(element).attr('id')) {
$(element).attr('id', $(element).attr('id') + '_Cloned');
}
});
originalTableHolder.css('border-bottom', '1px solid #aaa');
// Place the cloned table holder before original one
originalTableHolder.before(clonedtableHolder);
});
</script>
e finalmente sotto c'è la classe CSS per un po 'di colorazione.
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
Quindi l'idea di questa logica è quella di posizionare la tabella in un div del supporto di tabella e creare un clone di quel supporto sul lato client quando la pagina viene caricata. Ora nascondi il corpo del tavolo all'interno del supporto clone e posiziona la parte rimanente dell'intestazione sull'intestazione originale.
La stessa soluzione funziona anche per asp: gridview, è necessario aggiungere altri due passaggi per raggiungere questo obiettivo in gridview,
Nell'evento OnPrerender dell'oggetto gridview nella tua pagina Web, imposta la sezione della tabella della riga di intestazione uguale a TableHeader.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
E avvolgi la griglia <div class="table-holder"></div>.
Nota : se l'intestazione ha controlli selezionabili, potrebbe essere necessario aggiungere altro script jQuery per passare gli eventi generati nell'intestazione clonata all'intestazione originale. Questo codice è già disponibile nel plugin jQuery sticky-header creato da jmosbech