Це справді хитра річ, щоб на столі був липкий заголовок. У мене була така ж вимога, але з asp: GridView, і тоді я виявив, що дійсно думав мати липкий заголовок на gridview. Існує багато рішень, і на це мені знадобилося 3 дні, але жодне з них не змогло задовольнити.
Основним питанням, з яким я стикався з більшістю цих рішень, була проблема вирівнювання. Коли ви намагаєтеся зробити заголовок плаваючим, якимось чином вирівнювання комірок заголовка та клітин тіла виходить з колії.
За допомогою деяких рішень у мене також виникла проблема із заголовком заголовка на перші кілька рядків тіла, що призводить до того, що рядки тіла ховаються за плаваючим заголовком.
Тож тепер мені довелося реалізувати власну логіку, щоб досягти цього, хоча я також не вважаю це ідеальним рішенням, але це також може бути корисним для когось,
Нижче наведена таблиця зразків.
<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>
Примітка : Таблиця загорнута у DIV з атрибутом класу, рівним 'держателю таблиці'.
Нижче представлений сценарій JQuery, який я додав у свій заголовок 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>
і нарешті нижче - клас CSS для розрядки розмальовки.
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
Отже, вся ідея цієї логіки полягає в тому, щоб помістити таблицю в розділ власника таблиці та створити клон цього власника на стороні клієнта при завантаженні сторінки. Тепер схойте тіло таблиці всередині утримувача клонів і розташуйте частину заголовка, що залишилася, над початковим заголовком.
Це ж рішення працює і для asp: gridview, для досягнення цього в gridview потрібно додати ще два кроки,
У події OnPrerender об’єкта gridview на вашій веб-сторінці встановіть розділ таблиці рядка заголовка, рівний TableHeader.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
І загорніть свою сітку в <div class="table-holder"></div>.
Примітка : якщо у вашому заголовку є елементи, які можна натиснути, тоді вам може знадобитися додати ще якийсь сценарій jQuery, щоб передати події, підняті в клонованому заголовку, в оригінальний заголовок. Цей код уже доступний в плагіні jQuery sticky-header, створеному jmosbech