實際執行畫面

Flexigrid 式一個類似 Ext Gird 或者像是 Office Excel ，基於jQuery 開發的 Grid。它具有的功能包括：可以調整列寬、合併列標題、分頁、顯示/隱藏表格等等的。Flexigrid 顯示的數據能夠透過Ajax 來取得或者從一個頁面上的表格做轉換。

使用方法：
首先載入必要的檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//程式主體的CSS和JavaScript
<link rel="stylesheet" type="text/css" href="../css/flexigrid.pack.css" />
<script type="text/javascript" src="../js/flexigrid.pack.js"></script>

再來是呈現內容的HTML部分
<table class="flexme1">
  <thead>
    <tr>
      <th width="100">Col 1</th>
      <th width="100">Col 2</th>
      <th width="100">Col 3 is a long header name</th>
      <th width="300">Col 4</th>
    </tr>
  </thead>
  <tbody>
<tr>
      <td>This is data 1 with overflowing content</td>
      <td>This is data 2</td>
      <td>This is data 3</td>
      <td>This is data 4</td>
</tr>
<tr>
      <td>This is data 1 with overflowing content</td>
      <td>This is data 2</td>
      <td>This is data 3</td>
      <td>This is data 4</td>
</tr>
.
    .
    .
  </tbody>
</table>

最後加上一小段JavaScript就完成基本的表格了
<script type="text/javascript">
$('.flexme1').flexigrid();
</script>

附上可供修改的參數值

參數	說明
url	AJAX取的資料的連結
dataType	得得的資料格式.可以有 JSON 或者 XML
colModel	創建一個欄位陣列數組內容包含 display: 'ID', name : 'id', width : 40, sortable : true, align: 'left' 顯示的名稱,欄位的名稱,欄位的寬度,是否排序,對齊方式
buttons	創建一個按鈕陣列數組包含 name: 'Edit', bclass: 'edit', onpress : doCommand 按鈕名稱,按鈕CSS Class,按下之後執行的函式名稱
searchItems	創建一個搜尋欄位數組內容包含 display: 'Surname', name : 'surname', isdefault: true 顯示名稱,欄位名稱,是否為預設搜尋
sortname	初始化時排序的欄位名稱
sortorder	排序的方式 ASC 正序 DESC 反序
usepager	是否使用頁數
title	標題將出現於頂端
useRp	是否允使使用者選擇每頁結果數目
rp	初始化時顯示筆數
showTableToggleBtn	啟用最小化按鈕
width	表格寬度
height	標格高度
singleSelect	是否只可選擇單行

伺服器端會接收到的數值參數

參數	說明
page	現在頁數
sortname	排序的名稱
sortorder	排序的方式
qtype	快速搜尋欄
query	搜尋時打的文字
rp	顯示筆數

作者網站：http://www.flexigrid.info/
檔案大小：99.3 KB(包含範例)
檔案下載：https://github.com/paulopmx/Flexigrid
檔案備份：下載