[RWD] GridView搭配 FooTable (jQuery) 的表格效果 -- 自動折疊

摘要:[RWD] GridView搭配 FooTable (jQuery) 的表格效果
電腦、平板、智慧手機觀賞時,表格會進行自動折疊

為什麼寫在 RowDataBound事件會錯?而寫在 RowCreated事件才能運作?兩者有何差異??

 


 

 

 

[RWD] GridView搭配 FooTable (jQuery) 的表格效果 -- 電腦、平板、智慧手機觀賞時,表格會進行自動折疊

 

 

 
 
一位學員提供的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>
 
 
 
 
 
 
 
 
 
 

 

 

**********************************************************************

 

 

***   如何套用到 ASP.NET  GridView ???
**********************************************************************
 
(點選圖片可以連到原網站)
 
 
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");    
 
 
 
 
 
我簡單整合後的範例下載:RWD_GridView_FooTable.rar
 
 
想想看:-------------------------------------------------------------------------------------------
 
1. 如果要寫在後置程式碼裡面,該寫在 GridView 的 哪個事件裡??
 
2. 為什麼寫在 RowDataBound事件會錯?而寫在 RowCreated事件才能運作?兩者有何差異??
 
這個錯誤很重要,學會了就知道GridView的RowCreated事件、RowDataBound事件兩者的差異
 
您可以在以前的文章中學到這些技巧  http://www.dotblogs.com.tw/mis2000lab/Tags/RowDataBound/default.aspx
 
 
 
 
原廠範例下載:
      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 

[學員感言] 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.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課