[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

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net



ASP.NET遠距教學、線上課程(Web Form + MVC)。 第二門 課程「四折」-- 以MVC課程 作優惠。
第一天課程, "完整" 試聽。  如不滿意  全額退費!
................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

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

*** ASP.NET MVC線上課程 第一天 免費看 (5.5小時) *** 

************************************************************(歡迎索取,免費申請)*****

 

Blog文章 "附的範例" 無法下載,請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

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

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

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

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

    MIS2000 Lab.  線上教學影片(YouTube) **免費觀賞**