摘要:[jQuery]將您的表格或GridView固定標題列與凍結欄位 (gridviewscroll.aspcity.idv.tw)
[jQuery]將您的表格或GridView固定標題列與凍結欄位 (gridviewscroll.aspcity.idv.tw)
原作者的範例已經改至 https://github.com/twlikol/GridViewScroll
有位學員找到這個很棒的範例
感謝原作者無私分享，非常實用的好範例！......點選下圖可連到原作網站
這樣的範例，類似 Excel裡面的「凍結窗格」
不過，因為原作者提供的檔案是 html網頁。
這位學員看不懂，不知道如何加入jQuery效果，與 GridView (.aspx檔) 共存
P.S. 另一個類似的特效，可以參考 FooTable (jQuery)
https://dotblogs.com.tw/mis2000lab/2015/05/29/gridview_footable_jquery_rwd
***********************************************************************************************
2015/10/1 更正：感謝 ITHelp邦友 -- simon581923的指證
原作者的確有提供 .aspx (後置程式碼)的範例說明，只是我沒有找到。
2015/10/2 更正：
***********************************************************************************************
本文僅介紹 小部分功能，無法涵蓋原作所有功能
第一種解法：
您可以參考我的書本「上集」第十一章
書裡有一個範例，「刪除一筆記錄以前，出現一個JavaScript (Pop-up_小視窗讓您再次確認？Confirm ?」
作法大同小異，也會用到 .Attribes.Add()方法
我們先來觀察原作者的範例（WebForm.html）
可以看見表格的「表頭」加上了這一段 class="GridviewScrollHeader"
資料列裡面放入這一段 class="GridviewScrollItem"
<table cellspacing="0" id="GridView1" style="width:100%;border-collapse:collapse;">
<tr class="GridviewScrollHeader">
<td colspan="2">Product</td><td rowspan="2">ListPrice</td><td rowspan="2">StandardCost</td><td colspan="2">Package</td><td rowspan="2">SafetyStockLevel</td><td rowspan="2">ReorderPoint</td><td rowspan="2">SellStartDate</td>
</tr><tr class="GridviewScrollHeader">
<td>Name</td><td>Number</td><td>Weight</td><td>Size</td>
</tr><tr class="GridviewScrollItem">
<td style="background-color:#EFEFEF;">HL Mountain Frame - Black, 38</td><td style="background-color:#EFEFEF;">FR-M94B-38</td><td>1349.6000</td><td>739.0410</td><td>2.68</td><td>38</td><td>500</td><td>375</td><td>7/1/2005 12:00:00 AM</td>
</tr><tr class="GridviewScrollItem">
<td style="background-color:#EFEFEF;">HL Mountain Frame - Silver, 38</td><td style="background-color:#EFEFEF;">FR-M94S-38</td><td>1364.5000</td><td>747.2002</td><td>2.68</td><td>38</td><td>500</td><td>375</td><td>7/1/2005 12:00:00 AM</td>
</tr><tr class="GridviewScrollItem">
<td........>
</table>
if(e.Row.RowType == ....Header)
{
//請加入 "表頭"的特效
}
if(e.Row.RowType == ....DataRow)
{
//請加入 "資料列"的特效
}
當然，您還有其他作法，請參閱下面文章：
不過，還有第二種作法，更簡單！
我們既然發現了，這些jQuery特效是加註在每一列（HTML表格的 <tr>）裡面 class= "......"
那麼，
GridView的表頭（標題列），也就是 HeadersStyle裡面「CssClass」屬性加上GridviewScrollHeader即可！
GridView的資料列，也就是 RowStyle裡面「CssClass」屬性加上GridviewScrollItem即可！
本文僅介紹 小部分功能，無法涵蓋原作所有功能
當「一個」問題，您手上有「好幾種」解法，您就出師了！
抱歉，因為這個範例很簡單，所以不提供範例下載。請您到原作者網站下載相關的 jQuery與CSS
==============================================================================
在課程中，我們會介紹 jQuery UI特效、RWD（Bootstrap）與 ASP.NET Web Form結合
即使您不會 jQuery語法，也可以「套用」這些炫目的效果
與美工人員（前端設計師）工作時，您得套用他的畫面
但資料卻得從資料庫取得，自己 "寫程式"取出
（不要鬧了！這時候你還想靠大型控制項搭配SqlDataSource小精靈喔？....這樣連 22K薪資都不夠格啦）
學會這樣的技巧，您可以「自己學會」、「無痛升級」Google Chart
做出比原廠 Chart控制項更華麗且簡單的「網頁圖表」！
套用 fancyBox這類圖層、燈箱效果
有位學員上完課程才知道 jQuery語法的 . 與 #符號，原來是這樣的意思
他說他以前都不知道.......
事實上，本課程 "根本沒教到" jQuery語法，只是簡單 "帶"過去而已
怎麼你買書學不會？我根本沒教，簡單"帶"過去而已，你卻懂了？
所以「做中學」才是王道！
當我設計一個教案、一個範例，引起你的興趣！
即使 jQuery要花時間深入學習，因為你有了興趣就會奮不顧身 "鑽研" 下去！
我（老師）只要能點燃你的「興趣」，你就能向前衝了，不是嗎？
引述這篇文章：
或是 http://www.inside.com.tw/2012/11/19/software-engineering-experience-sharing
其實巨X幫了我很多，但巨X最大的問題是…
你報名時，報的是課程，至於誰教你，你永遠不知道
.............................
總而言之，我想分享的第一件事就是
不管你去巨X，去uuu還是去iii，最重要的是跟"講師"
如果一門課程的講師 不事先確定(或是講師不好)，不如不上
真的是 好的老師 讓你上天堂…不好的老師就…
我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson
線上課程教學，遠距教學 (Web Form 約 51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015
線上課程教學，遠距教學 (ASP.NET MVC 約 140hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab
寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.tw 或 school (at) mis2000lab.net
(1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A
(2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I
ASP.NET遠距教學、線上課程（Web Form + MVC）。 第一天課程， "完整" 試聽。
......... facebook社團 https://www.facebook.com/mis2000lab ......................
......... YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/
Blog文章 "附的範例" 無法下載，請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download
請看我們的「售後服務」範圍（嚴格認定）。
......................................................................................................................................................
