Это действительно сложная вещь - иметь липкий заголовок на столе. У меня было такое же требование, но с 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 с атрибутом класса, равным «table-holder».
Ниже приведен скрипт 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;
}
Таким образом, вся идея этой логики состоит в том, чтобы поместить таблицу в div держателя таблицы и создать клон этого держателя на стороне клиента при загрузке страницы. Теперь скройте тело таблицы внутри держателя клона и поместите оставшуюся часть заголовка в исходный заголовок.
То же решение также работает для 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