이것은 테이블에 끈적 끈적한 헤더를 갖는 것이 까다로운 일입니다. 나는 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>
참고 : 테이블은 클래스 속성이 'table-holder'인 DIV로 랩핑됩니다.
아래는 html 페이지 헤더에 추가 한 JQuery 스크립트입니다.
<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에서이를 달성하려면 두 단계를 더 추가해야합니다.
웹 페이지의 gridview 객체의 OnPrerender 이벤트에서 머리글 행의 테이블 섹션을 TableHeader와 동일하게 설정하십시오.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
그리고 당신의 그리드를로 감싸십시오 <div class="table-holder"></div>.
참고 : 헤더에 클릭 가능한 컨트롤이있는 경우 복제 된 헤더에서 발생한 이벤트를 원래 헤더로 전달하기 위해 더 많은 jQuery 스크립트를 추가해야 할 수도 있습니다. 이 코드는 jmosbech에서 생성 한 jQuery sticky-header 플러그인에서 이미 사용 가능합니다.