本教程從零開始介紹Flexigrid的使用方法，記錄了作者學習中的點點滴滴，實例主要是在.net mvc框架下實現的，廢話不多說了，先看一下Flexigrid的效果圖吧。
1、主要特性：
Flexigrid是Jquery家族中table類或grid類的一員，主要特性如下：
* 列可伸縮
* 高度可調整
* 可按照表頭排序
* 很酷的外觀風格
* 能夠轉換一個普通的表格
* 可以連接到一個ajax方式的數據源（僅是xml格式）
* 分頁功能
* 顯示/隱藏 列
* 提供可供外部訪問的API
* 更多更多…
Google group 上的介紹：輕量級但功能豐富的data grid插件，支持列伸縮和排序功能，可採用ajax的方式連接到一個xml的數據源來獲取所需數據，和Ext Grid非常相似，但它是純jquery的，這使得它更加小巧，並遵循jquery插件一貫的少量配置特性
2.如何獲取flexigrid？
既然官網已經無法訪問，那就去其他途經吧，在上面提到的jquery站點和Google group站點都可以找到下載鏈接，如果仍然無法搞定，那麼pm我吧：）
3.我想觀看一下Demo先
嗯，不錯的習慣，畢竟同類插件已經挺多的了，也不乏jqgrid這樣的強悍者，還是貨比三家先吧。Google group上提供的各個後臺語言版本的Demo：
php 版本的 by Kevin Kietel: http://sanderkorvemaker.nl/test/flexigrid/
CodeIgniter 版本的 by Armorfist: http://flexigrid.eyeviewdesign.com/
ASP 版本的 by Synergiq: http://jamesowers.co.uk/asp-tutorials/57/flexigrid-with-asp/
Ruby on Rails 版本的 by Nick Fessel: http://www.nickfessel.com/index.php?post=17
二、具體使用方法
簡單說明：使用時首先需要引用jquery.js和flexigrid.js兩個Js庫，因爲是Jquery插件所以Jquery庫是不可少的。
下面是一個完整的代碼：
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Dialog.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Kwstu.Model.DESYS_STANDEVICE>>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
//重新定義表格大小，使flexigrid隨瀏覽器大小改變而改變
$(window).resize(function () {
var w = $("#content_right").width() - 20;
var gh = $("#content_right").height() - 86;
$("#grdProList").flexResize(w, gh);
});
//定義高度和寬帶，此處是根據本頁面的模板來的
var maiheight = document.documentElement.clientHeight;
var w = $("#content_right").width() - 20;
var gh = $("#content_right").height() - 86;
var grid = $("#grdProList").flexigrid
({
url: '/BDeviceApply/GetSysSdandeviceFlex',//獲取數據的方法
dataType: 'json',
colModel: [
{ display: '列1標題', name: '字段1', sortable: true, width: 150, align: 'center' },
{ display: '列1標題', name: '字段2', sortable: true, width: 80, align: 'center' },
{ display: 列1標題', name: '字段3', sortable: true, width: 80, align: 'center' },
{ display: '列1標題', name: '字段4', sortable: true, width: 80, align: 'center' }
],
ShowToggleCol: true,
singleSelect: true,
sortname: 'ID',
sortorder: 'DESC',
usepager: true,
striped: true,
title: '設備標準庫信息列表',
useRp: true,
rp: 20,
rpOptions: [10, 20, 40, 100],
usepager: true,
showTableToggleBtn: true,
showcheckbox: true,
width: w,
height: gh,
pagestat: '顯示{from} 到 {to}， 共2 {total} 條',
procmsg: '請等待數據正在加載中…',
nomsg: '沒有數據',
onError: '查詢出錯請刷新'
});
});
</script>
<table id="grdProList" style="display: none;">
</table>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="menutop" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="menubottem" runat="server">
</asp:Content>
以上是在.NET MVC項目中的代碼，不同技術下的獲取數據的方法可能不能，具體方法代碼後面介紹，以上就是一個很簡單的沒有數據源的flexigrid的小實例。
三、flexigrid詳細參數介紹
1、flexigrid參數說明:
height: 200, //flexigrid插件的高度，單位爲px
width: 'auto', //寬度值，auto表示根據每列的寬度自動計算，在IE6下建議設置具體值否則會有問題
striped: true, //是否顯示斑紋效果，默認是奇偶交互的形式
novstripe: false,//沒用過這個屬性
minwidth: 30, //列的最小寬度
minheight: 80, //列的最小高度
resizable: false, //resizable table是否可伸縮
url: false, //ajax url,ajax方式對應的url地址
method: 'POST', // data sending method,數據發送方式
dataType: 'json', // type of data loaded,數據加載的類型，xml,json
errormsg: '發生錯誤', //錯誤提升信息
usepager: false, //是否分頁
nowrap: true, //是否不換行
page: 1, //current page,默認當前頁
total: 1, //total pages,總頁面數
useRp: true, //use the results per page select box,是否可以動態設置每頁顯示的結果數
rp: 25, // results per page,每頁默認的結果數
rpOptions: [10, 15, 20, 25, 40, 100], //可選擇設定的每頁結果數
title: false, //是否包含標題
pagestat: '顯示記錄從{from}到{to}，總數 {total} 條', //顯示當前頁和總頁面的樣式
procmsg: '正在處理數據，請稍候 ...', //正在處理的提示信息
query: '', //搜索查詢的條件
qtype: '', //搜索查詢的類別
qop: "Eq", //搜索的操作符
nomsg: '沒有符合條件的記錄存在', //無結果的提示信息
minColToggle: 1, //允許顯示的最小列數
showToggleBtn: true, //是否允許顯示隱藏列，該屬性有bug設置成false點擊頭腳本報錯。
hideOnSubmit: true, //是否在回調時顯示遮蓋
showTableToggleBtn: false, //是否顯示【顯示隱藏Grid】的按鈕
autoload: true, //自動加載，即第一次發起ajax請求
blockOpacity: 0.5, //透明度設置
onToggleCol: false, //當在行之間轉換時，可在此方法中重寫默認實現，基本無用
onChangeSort: false, //當改變排序時，可在此方法中重寫默認實現，自行實現客戶端排序
onSuccess: false, //成功後執行
onSubmit: false, // 調用自定義的計算函數，基本沒用
//Style
gridClass: "bbit-grid"//樣式
}, p);
----------------------------------------------------------------------------------------------
2、支持ajax跨域：
url中加callback=?
後臺獲得callback函數的名字
返回json數據格式爲:print(callbackName+"("+jsonString+")");
----------------------------------------------------------------------------------------------
3、Flexigrid(HUGO.CM修改版v1.1)使用說明:
1、加載flexigrid。p：選項參數集合
$(“”).flexigrid(p);
2、重新加載數據。
$(“”).flexReload(p);
3、更改flexigrid參數。P：選項參數集合
$(“”).flexOptions (p);
4、隱藏/顯示列。cid：列索引，visible：bool
$(“”).flexToggleCol (cid, visible);
5、綁定數據。Data：數據源
$(“”).flexAddData (data);
6、no select plugin by me 。不知道做什麼用的
$(“”).noSelect (p);
7、重新指定寬度和高度。
$(“”).flexResize(w,h);
8、翻頁。type：first、prev、next、last、input
$(“”).changePage(type);
----------------------------------------------------------------------------------------------
4、Flexigrid——colModel:
屬性名 類型 描述
display string 顯示的列名
name string 綁定的列名
sortable bool 是否可以排序
align string 對其方式
width int 列的寬度
hide bool 是否隱藏該列
pk bool 是否爲主鍵標識、如果是則隱藏該列，值存入隱藏域中
process function
customValue function 自定義顯示值。(如性別：數據庫爲Bit類型，通過customValue方法返回“男/女”)參數：value,i
----------------------------------------------------------------------------------------------
5、Flexigrid——事件
事件名 參數 描述 返回值
onDragCol dcoln,dcolt 拖動列後觸發 無
onToggleCol cid,visible 隱藏/顯示列後觸發 無
onChangeSort sortname,sortorder 自定義排序事件 無
onChangePage newp 自定義翻頁事件 無
onSuccess 無 數據獲取成功時觸發 無
onError XMLHttpRequest,textStatus,errorThrown 出現錯誤時觸發 無
onSubmit 無 在獲取數據前時觸發
bool
onRowSelect this 行選中事件 無
----------------------------------------------------------------------------------------------
6、Flexigrid——buttons
屬性名 類型 描述
name string 按鈕名稱
bgclass string 樣式
onpress function 點擊觸發的方法
separator bool 分割線
----------------------------------------------------------------------------------------------
7、Flexigrid——searchitems
屬性名 類型 描述
display string 搜索類型下拉列表框：顯示的列名
name string 搜索類型下拉列表框：綁定的列名
isdefault bool 是否爲默認搜索類型
//注：如果searchitems：true，則自動根據所有字段生成下拉列表框