Đây thực sự là một điều khó khăn để có một tiêu đề dính trên bàn của bạn. Tôi có cùng một yêu cầu nhưng với asp: GridView và sau đó tôi thấy nó thực sự được cho là có tiêu đề dính trên Gridview. Có rất nhiều giải pháp có sẵn và tôi đã mất 3 ngày để thử tất cả các giải pháp nhưng không có giải pháp nào có thể đáp ứng.
Vấn đề chính mà tôi phải đối mặt với hầu hết các giải pháp này là vấn đề căn chỉnh. Khi bạn cố gắng làm cho tiêu đề nổi, bằng cách nào đó, sự liên kết của các ô tiêu đề và các ô cơ thể bị lạc hướng.
Với một số giải pháp, tôi cũng gặp vấn đề về việc tiêu đề bị chồng chéo lên một vài hàng đầu tiên, điều này khiến các hàng cơ thể bị ẩn sau tiêu đề nổi.
Vì vậy, bây giờ tôi phải thực hiện logic của riêng mình để đạt được điều này, mặc dù tôi cũng không coi đây là giải pháp hoàn hảo nhưng điều này cũng có thể hữu ích cho ai đó,
Dưới đây là bảng mẫu.
<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>
Lưu ý : Bảng được bọc trong DIV với thuộc tính lớp bằng 'ngăn chứa bảng'.
Dưới đây là tập lệnh JQuery mà tôi đã thêm vào tiêu đề trang html của mình.
<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>
và cuối cùng bên dưới là lớp CSS cho mục đích tô màu.
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
Vì vậy, toàn bộ ý tưởng của logic này là đặt bảng vào div giữ bảng và tạo bản sao của ngăn chứa đó ở phía máy khách khi tải trang. Bây giờ ẩn phần thân của bảng bên trong ngăn chứa bản sao và đặt phần tiêu đề còn lại lên trên tiêu đề ban đầu.
Giải pháp tương tự cũng hoạt động cho asp: Gridview, bạn cần thêm hai bước nữa để đạt được điều này trong Gridview,
Trong sự kiện OnPrerender của đối tượng Gridview trong trang web của bạn, hãy đặt phần bảng của hàng tiêu đề bằng với TableHeader.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
Và bọc lưới của bạn vào <div class="table-holder"></div>.
Lưu ý : nếu tiêu đề của bạn có các điều khiển có thể nhấp thì bạn có thể cần thêm một số tập lệnh jQuery khác để chuyển các sự kiện được nêu trong tiêu đề nhân bản vào tiêu đề gốc. Mã này đã có sẵn trong plugin tiêu đề dính jQuery được tạo bởi jmosbech