摘自：http://www.kwstu.com/Article/ShowArticle.asp?ArticleID=259
本教程从零开始介绍Flexigrid的使用方法，记录了作者学习中的点点滴滴，实例主要是在.net mvc框架下实现的，废话不多说了，先看一下Flexigrid的效果图吧。
?一、首先简单介绍一下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',width: 80,
???????????????????{ display:?列1标题',name:?'字段3',name:?'字段4',align:?'center'?}
??????????????????],
??????????????ShowToggleCol:?true,
??????????????singleSelect:?true,
??????????????sortname:?'ID',
??????????????sortorder:?'DESC',
??????????????usepager:?true,
??????????????striped:?true,
??????????????title:?'设备标准库信息列表',
??????????????useRp:?true,
??????????????rp: 20,
??????????????rpOptions: [10,20,40,100],
??????????????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,25,//可选择设定的每页结果数
??? 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，则自动根据所有字段生成下拉列表框
