[jQuery]將您的表格或GridView固定標題列與凍結欄位 (gridviewscroll.aspcity.idv.tw)

摘要:[jQuery]將您的表格或GridView固定標題列與凍結欄位 (gridviewscroll.aspcity.idv.tw)




 

[jQuery]將您的表格或GridView固定標題列與凍結欄位 (gridviewscroll.aspcity.idv.tw)
原作者的範例已經改至  https://github.com/twlikol/GridViewScroll
 
有位學員找到這個很棒的範例
http://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 更正
***********************************************************************************************
 
本文僅介紹 小部分功能,無法涵蓋原作所有功能
 
 
 
第一種解法:
 
您可以參考我的書本「上集」第十一章
介紹GridView的 RowDataBound事件的作法
 
書裡有一個範例,「刪除一筆記錄以前,出現一個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>
 
 
GridView的 RowDataBound事件剛好可以幫您做到這件事
 
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 約 135hr)  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 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


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

請看我們的「售後服務」範圍(嚴格認定)。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課