摘要:[RWD] GridView搭配 FooTable (jQuery) 的表格效果
電腦、平板、智慧手機觀賞時，表格會進行自動折疊
為什麼寫在 RowDataBound事件會錯？而寫在 RowCreated事件才能運作？兩者有何差異？？
一位學員提供的RWD效果，名為 FooTable。但做不出來。
完成後的效果，如下圖（點選圖片可以連到原網站）
首先，一開始就埋頭苦幹，死讀文件，太累，也沒成品可模仿
我先找出原廠的Demo網頁看看效果
然後將網頁 <head>部分複製下來。
原廠範例下載：
https://github.com/bradvin/FooTable/archive/master.zip
裡面有很多 Demo開頭的HTML檔，看您喜歡哪個效果？
P.S. 另一個類似範例 [jQuery]將您的表格或GridView固定標題列與凍結欄位
https://dotblogs.com.tw/mis2000lab/2015/09/30/153463
比照上圖的效果：
phone代表小畫面的效果（手機看的畫面）
tablet代表大畫面的效果（平板看的畫面）
<table class="footable" data-filter="#filter">
<thead>
<tr>
<th data-sort-initial="descending" data-class="expand">
First Name
</th>
<th data-sort-ignore="true">
Last Name
</th>
<th data-hide="phone,tablet">
Job Title
</th>
<th data-hide="phone,tablet" data-type="numeric">
DOB
</th>
<th data-hide="phone" data-type="numeric">
Status
</th>
</tr>
</thead>
...
</table>
**********************************************************************
**********************************************************************
（點選圖片可以連到原網站）
HTML網頁裡面，除了網頁表頭 <head>要加入 jQuery與 FooTable的CSS與JS檔以外
(1). GridView控制項的CssClass屬性也得設定 FooTable。
對應HTML表格的設定 -- <table class="footable" >
(2). 後置程式碼 Page_Load事件，添加如下
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
cells[0].Attributes.Add("data-class", "expand");
cells[1].Attributes.Add("data-hide", "phone,tablet");
cells[2].Attributes.Add("data-hide", "phone,tablet");
cells[3].Attributes.Add("data-hide", "phone,tablet");
cells[4].Attributes.Add("data-hide", "phone");
想想看：-------------------------------------------------------------------------------------------
1. 如果要寫在後置程式碼裡面，該寫在 GridView 的 哪個事件裡？？
2. 為什麼寫在 RowDataBound事件會錯？而寫在 RowCreated事件才能運作？兩者有何差異？？
原廠範例下載：
https://github.com/bradvin/FooTable/archive/master.zip
如果想做「（表頭、標題）排序」與「分頁」，參考 demo-bootstrapSwitch.html。
記得加上
<script src="js/footable.sortable.js" type="text/javascript"></script>
<script src="js/footable.paginate.js" type="text/javascript"></script>
<script src="bootstrap/bootstrapSwitch.js" type="text/javascript"></script>
HTML的 "表格" 要加上
<table class="footable" data-page-size="5">
表格下方的分頁列：
<ul id="pagination" class="footable-nav"><span>Pages:</span></ul>
隔列換底色 (Alternating)、光棒效果，則參考 demo-zebra.html
<script type="text/javascript">
$(function() {
$('table').footable().find('> tbody > tr:not(.footable-row-detail):nth-child(even)').addClass('zebra');
});
</script>
<style type="text/css">
.footable tbody tr.zebra {
background:#fee;
}
</style>
我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----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
請看我們的「售後服務」範圍（嚴格認定）。
......................................................................................................................................................
