Ini benar-benar hal yang sulit untuk memiliki header yang lengket di meja Anda. Saya memiliki persyaratan yang sama tetapi dengan asp: GridView dan kemudian saya menemukan itu benar-benar dianggap memiliki header yang lengket di gridview. Ada banyak solusi yang tersedia dan saya butuh 3 hari untuk mencoba semua solusi tetapi tidak ada satupun yang bisa memuaskan.
Masalah utama yang saya hadapi dengan sebagian besar solusi ini adalah masalah penyelarasan. Saat Anda mencoba membuat tajuk melayang, entah bagaimana penyelarasan sel tajuk dan sel tubuh keluar jalur.
Dengan beberapa solusi, saya juga mendapat masalah tumpang tindih tumpang tindih dengan beberapa baris tubuh pertama, yang menyebabkan baris tubuh tersembunyi di belakang tajuk mengambang.
Jadi sekarang saya harus menerapkan logika saya sendiri untuk mencapai ini, meskipun saya juga tidak menganggap ini sebagai solusi yang sempurna tetapi ini juga bisa bermanfaat bagi seseorang,
Di bawah ini adalah tabel sampel.
<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>
Catatan : Tabel ini dibungkus menjadi DIV dengan atribut kelas yang sama dengan 'table-holder'.
Di bawah ini adalah skrip JQuery yang saya tambahkan di header halaman html saya.
<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>
dan akhirnya di bawah ini adalah kelas CSS untuk tujuan pewarnaan.
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
Jadi seluruh ide dari logika ini adalah untuk menempatkan tabel ke dalam div pemegang tabel dan membuat klon dari pemegang itu di sisi klien ketika halaman dimuat. Sekarang sembunyikan isi tabel di dalam pemegang klon dan posisikan bagian tajuk yang tersisa ke tajuk asli.
Solusi yang sama juga berfungsi untuk asp: gridview, Anda perlu menambahkan dua langkah lagi untuk mencapai ini di gridview,
Dalam acara OnPrerender objek gridview di halaman web Anda, setel bagian tabel dari baris header sama dengan TableHeader.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
Dan bungkus grid Anda menjadi <div class="table-holder"></div>.
Catatan : jika tajuk Anda memiliki kontrol yang dapat diklik maka Anda mungkin perlu menambahkan beberapa skrip jQuery untuk meneruskan peristiwa yang dibesarkan dalam tajuk yang dikloning ke tajuk asli. Kode ini sudah tersedia di plugin sticky-header jQuery yang dibuat oleh jmosbech