本教程从零开始介绍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],
?? ???????????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,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，则自动根据所有字段生成下拉列表框
出处：http://zhwlsoft.blog.163.com/blog/static/176371202201239103635250/
