Bu, masanızda yapışkan bir başlık olması gerçekten zor bir şey. Ben aynı gereksinimi vardı ama asp: GridView ile ve sonra gerçekten gridview üzerinde yapışkan başlık olduğunu düşündüm. Birçok çözüm mevcut ve tüm çözümü denemek 3 gün sürdü ama hiçbiri tatmin edemedi.
Bu çözümlerin çoğuyla karşılaştığım ana sorun, hizalama sorunuydu. Üstbilgiyi yüzer hale getirmeye çalıştığınızda, üstbilgi hücrelerinin ve vücut hücrelerinin hizalaması bir şekilde yoldan çıkar.
Bazı çözümlerle, üstbilginin ilk birkaç satırla üst üste binmesi sorununu yaşadım, bu da vücut sıralarının kayan başlığın arkasında gizlenmesine neden oldu.
Şimdi bunu başarmak için kendi mantığımı uygulamak zorunda kaldım, ancak bunu mükemmel bir çözüm olarak görmüyorum, ancak bu aynı zamanda birisi için de yararlı olabilir,
Aşağıda örnek tablo bulunmaktadır.
<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>
Not : Tablo, sınıf özniteliği 'tablo tutucuya eşit olan bir DIV'ye sarılır.
Aşağıda html sayfa başlığımda eklediğim JQuery komut dosyası var.
<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>
ve son olarak, biraz renklendirme amaçlı CSS sınıfıdır.
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
Bu mantığın tüm fikri, tabloyu bir tablo tutucu div içine yerleştirmek ve sayfa yüklendiğinde istemci tarafında bu sahibinin klonunu oluşturmaktır. Şimdi tablonun gövdesini klon tutucunun içine gizleyin ve kalan başlık kısmını orijinal başlığa yerleştirin.
Aynı çözüm asp için de çalışır: gridview, gridview'de bunu başarmak için iki adım daha eklemeniz gerekir,
Web sayfanızdaki gridview nesnesinin OnPrerender olayında, üstbilgi satırının tablo bölümünü TableHeader değerine eşit olarak ayarlayın.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
Ve ızgaranızı içine sarın <div class="table-holder"></div>.
Not : Başlığınızda tıklanabilir denetimler varsa, klonlanmış üstbilgide oluşturulan olayları orijinal başlığa geçirmek için biraz daha jQuery komut dosyası eklemeniz gerekebilir. Bu kod zaten jmosbech tarafından oluşturulan jQuery yapışkan başlık eklentisi mevcuttur