Dies ist wirklich eine schwierige Sache, um einen klebrigen Header auf Ihrem Tisch zu haben. Ich hatte die gleiche Anforderung, aber mit asp: GridView und dann fand ich, dass es wirklich gedacht war, einen klebrigen Header in Gridview zu haben. Es gibt viele Lösungen und ich habe 3 Tage gebraucht, um die gesamte Lösung auszuprobieren, aber keine davon konnte mich befriedigen.
Das Hauptproblem, mit dem ich bei den meisten dieser Lösungen konfrontiert war, war das Ausrichtungsproblem. Wenn Sie versuchen, den Header schwebend zu machen, gerät die Ausrichtung von Header- und Körperzellen irgendwie aus der Bahn.
Bei einigen Lösungen trat auch das Problem auf, dass Header mit den ersten Zeilen des Körpers überlappt wurden, was dazu führte, dass Körperzeilen hinter dem schwebenden Header versteckt wurden.
Also musste ich jetzt meine eigene Logik implementieren, um dies zu erreichen, obwohl ich dies auch nicht als perfekte Lösung betrachte, aber dies könnte auch für jemanden hilfreich sein,
Unten ist die Beispieltabelle.
<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>
Hinweis : Die Tabelle wird in ein DIV mit dem Klassenattribut 'Tabellenhalter' eingeschlossen.
Unten finden Sie das JQuery-Skript, das ich in meinem HTML-Seitenkopf hinzugefügt habe.
<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>
und zuletzt unten ist die CSS-Klasse für ein bisschen Farbzweck.
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
Die ganze Idee dieser Logik besteht also darin, die Tabelle in einem Div für Tabellenhalter zu platzieren und beim Laden der Seite einen Klon dieses Halters auf der Clientseite zu erstellen. Verstecken Sie nun den Tischkörper im Klonhalter und positionieren Sie den verbleibenden Headerteil über dem ursprünglichen Header.
Dieselbe Lösung funktioniert auch für asp: gridview. Sie müssen zwei weitere Schritte hinzufügen, um dies in gridview zu erreichen.
Setzen Sie im OnPrerender-Ereignis des Gridview-Objekts auf Ihrer Webseite den Tabellenabschnitt der Kopfzeile auf TableHeader.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
Und wickeln Sie Ihr Gitter in <div class="table-holder"></div>.
Hinweis : Wenn Ihr Header über anklickbare Steuerelemente verfügt, müssen Sie möglicherweise ein weiteres jQuery-Skript hinzufügen, um die im geklonten Header ausgelösten Ereignisse an den ursprünglichen Header zu übergeben. Dieser Code ist bereits im von jmosbech erstellten jQuery-Plugin für Sticky-Header verfügbar