Flexigrid系列使用教程（一）前台代码及参数说明
摘自：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', 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，则自动根据所有字段生成下拉列表框