আপনার টেবিলের উপর একটি স্টিকি হেডার থাকা সত্যিই এটি খুব জটিল। আমার একই প্রয়োজনীয়তা ছিল তবে এসপ সহ : গ্রিডভিউ এবং তারপরে আমি সত্যিই গ্রিডভিউতে স্টিকি হেডার থাকার কথা ভেবেছিলাম। অনেকগুলি উপলভ্য আছে এবং সমস্ত সমাধানের চেষ্টা করে আমার 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>
দ্রষ্টব্য : টেবিলটি একটি ডিআইভিতে মোড়কযুক্ত 'টেবিল-ধারক' এর সমান শ্রেণীর বৈশিষ্ট্য সহ।
নীচে আমি আমার এইচটিএমএল পৃষ্ঠা শিরোনামে জিকুয়ারি স্ক্রিপ্ট যুক্ত করেছি।
<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 স্ক্রিপ্ট যুক্ত করতে হতে পারে। এই কোডটি jmosbech দ্বারা তৈরি jQuery স্টিকি-হেডার প্লাগইনে ইতিমধ্যে উপলব্ধ