यह वास्तव में एक मुश्किल बात है कि आपकी मेज पर एक चिपचिपा हैडर है। मेरे पास समान आवश्यकता थी लेकिन एस्प के साथ : ग्रिड व्यू और फिर मैंने पाया कि वास्तव में ग्रिडव्यू पर चिपचिपा हेडर लगा है। कई समाधान उपलब्ध हैं और मुझे सभी समाधानों की कोशिश में 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 में लिपटी है।
नीचे 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>
और सबसे नीचे रंग भरने के उद्देश्य के लिए सीएसएस क्लास है।
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
इसलिए इस तर्क का पूरा विचार है कि टेबल को टेबल होल्डर डिव में रखें और पेज लोड होने पर क्लाइंट साइड में उस होल्डर का क्लोन बनाएं। अब क्लोन होल्डर के अंदर टेबल की बॉडी को छिपाएं और बाकी हेडर वाले हिस्से को ओरिजिनल हेडर पर रखें।
समान समाधान एस्प के लिए भी काम करता है: ग्रिडव्यू, आपको ग्रिडव्यू में इसे प्राप्त करने के लिए दो और चरणों को जोड़ने की आवश्यकता है,
अपने वेब पेज में ग्रिडव्यू ऑब्जेक्ट के ऑनपैरेंडर इवेंट में, हेडर पंक्ति के टेबल सेक्शन को टेबल हैडर के बराबर सेट करें।
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
और अपने ग्रिड में लपेटो <div class="table-holder"></div>।
नोट : यदि आपके हेडर पर क्लिक करने योग्य नियंत्रण है, तो क्लोन हेडर में उठाए गए ईवेंट को मूल हेडर में पास करने के लिए आपको कुछ और jQuery स्क्रिप्ट जोड़ने की आवश्यकता हो सकती है। इस कोड jQuery चिपचिपा हेडर प्लगइन द्वारा बनाने में पहले से ही उपलब्ध है jmosbech