นี่เป็นสิ่งที่ยุ่งยากหากมีหัวกระดาษที่เหนียวบนโต๊ะของคุณ ฉันมีความต้องการเดียวกัน แต่ด้วย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 พร้อมกับแอตทริบิวต์ class เท่ากับ '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 class สำหรับการระบายสี
.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 script เพื่อส่งเหตุการณ์ที่เกิดขึ้นในส่วนหัวที่ถูกโคลนไปยังส่วนหัวดั้งเดิม รหัสนี้มีอยู่แล้วใน jQuery ปลั๊กอินส่วนหัวที่สร้างโดยjmosbech