To naprawdę trudne, aby mieć lepki nagłówek na stole. Miałem te same wymagania, ale z asp: GridView, a potem stwierdziłem, że naprawdę pomyślałem, że ma lepki nagłówek w widoku siatki. Dostępnych jest wiele rozwiązań i wypróbowanie wszystkich zajęło mi 3 dni, ale żadne z nich nie było satysfakcjonujące.
Głównym problemem, z którym miałem do czynienia w przypadku większości tych rozwiązań, był problem z wyrównaniem. Kiedy próbujesz sprawić, by nagłówek był pływający, w jakiś sposób wyrównanie komórek nagłówka i komórek treści znika z właściwej ścieżki.
W przypadku niektórych rozwiązań pojawił się również problem z nakładaniem się nagłówka na kilka pierwszych rzędów treści, co powoduje, że wiersze treści są ukrywane za pływającym nagłówkiem.
Więc teraz musiałem zaimplementować własną logikę, aby to osiągnąć, chociaż też nie uważam tego za idealne rozwiązanie, ale może to też być pomocne dla kogoś,
Poniżej znajduje się przykładowa tabela.
<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>
Uwaga : Tabela jest opakowana w DIV z atrybutem klasy równym „table-holder”.
Poniżej znajduje się skrypt JQuery, który dodałem w nagłówku mojej strony 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>
i na koniec poniżej jest klasa CSS do trochę kolorowania.
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
Więc cała idea tej logiki polega na umieszczeniu tabeli w div tabeli i utworzeniu klonu tego uchwytu po stronie klienta po załadowaniu strony. Teraz ukryj korpus tabeli w uchwycie klonu i umieść pozostałą część nagłówka nad oryginalnym nagłówkiem.
To samo rozwiązanie działa również dla asp: gridview, musisz dodać jeszcze dwa kroki, aby to osiągnąć w widoku siatki,
W zdarzeniu OnPrerender obiektu gridview na Twojej stronie internetowej ustaw sekcję tabeli w wierszu nagłówka na wartość TableHeader.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
I zawiń swoją siatkę w <div class="table-holder"></div>.
Uwaga : jeśli twój nagłówek ma klikalne elementy sterujące, może być konieczne dodanie więcej skryptu jQuery, aby przekazać zdarzenia wywołane w sklonowanym nagłówku do oryginalnego nagłówka. Ten kod jest już dostępny we wtyczce jQuery sticky-header stworzonej przez jmosbech