嗯，最近做一个程序，不想用微软那个gridView了，想换个JS的，extJS，还没研究，主要是不知道怎么从那个很大的库里摘出来一个Grid用，jqgrid，下载一看，还是有点复杂，所以选了jquery flexgrid。
官方网址：jhttp://www.flexigrid.info/
文档：http://code.google.com/p/flexigrid/wiki/TutorialPropertiesAndDocumentation
他的文档不全，是个软肋啊。
在尝试了半天之后，总结它的用法，给个小例子吧。参考代码在最下边。
网上一些文章说jquery flexgrid不支持后台分页，其实是错误的。
（1）在web页面上，使用jquery flexgrid，引入jquery，jqueryflexgrid，然后书写一个标记：
代码1：
<table id="flex1" style=""></table>
这个名为flex1的table将会生成一个grid。
（2）JS代码:
代码2
<script>
$().ready(function () {
$("#flex1").flexigrid({
url: 'Handler/TestFlexGrid.ashx',
dataType: 'json',
colModel: [
{ display: '编号', name: 'Unid', 40, align: 'center' },
{ display: '第一列', name: 'CustomerName', 180, align: 'left' },
{ display: '第二列', name: 'Memo', 120, align: 'left' },
],
sortname: "col1",
sortorder: "asc",
usepager: true,
title: 'One Demo',
useRp: true,
rp: 10,
'auto',
height: 255
})
});
</script>
$().ready(); 你懂的。
$("#flex1").flexigrid（）； //产生一个Grid。 看看参数：
代码3：
height: 200, //flexigrid插件的高度，单位为px
‘auto’, //宽度值，auto表示根据每列的宽度自动计算
striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
novstripe: false,
min 30, //列的最小宽度
minheight: 80, //列的最小高度
resizable: true, //是否可伸缩
url: false, //ajax方式对应的url地址
method: ‘POST’, // 数据发送方式
dataType: ‘xml’, // 数据加载的类型
errormsg: ‘Connection Error’,//错误提升信息
usepager: false, //是否分页
nowrap: true, //是否不换行
page: 1, //默认当前页
total: 1, //数据的总行数
useRp: true, //是否可以动态设置每页显示的结果数
rp: 15, // 每页显示的行数
rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
title: false,//是否包含标题
pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式
procmsg: ‘Processing, please wait …’,//正在处理的提示信息
query: ”,//搜索查询的条件
qtype: ”,//搜索查询的类别
nomsg: ‘No items’,//无结果的提示信息
minColToggle: 1, //minimum allowed column to be hidden
showToggleBtn: true, //show or hide column toggle popup
hideOnSubmit: true,//隐藏提交
autoload: true,//自动加载
blockOpacity: 0.5,//透明度设置
onToggleCol: false,//当在行之间转换时
onChangeSort: false,//当改变排序时
onSuccess: false,//成功后执行
onSubmit: false // 调用自定义的计算函数
其中一个属性total，flexgrid.js 源码中是这样：total: 1, //total pages
好家伙这个total pages的解释让我纠结了好久，但是测试一下，它的含义应该是总行数哦。
代码片段2中的 url: 'Handler/TestFlexGrid.ashx', 是后台返回数据的处理程序；flexgrid接受的JSON格式：
代码片段4
page:"1",total:"2",rows:[{cell:["a","aa"……]},{cell:[……]}]}
json是啥？你懂的。。。
看看我是咋写的：
代码片段5：
1 public class FlexigridObject
2 {
3 public int page;
4 public int total;
5 public List<FlexigridRow> rows = new List<FlexigridRow>();
6 }
7
8 public class FlexigridRow
9 {
10 public string id;
11 public List<string> cell = new List<string>();
12 }
FlexigridObject 就是最终要返回给前台的数据，FlexigridRow就是每一行的数据。
然后看看怎么返回的。
代码片段6：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pageNo = Int32.Parse(context.Request["page"]);
int pageNum = Int32.Parse(context.Request["rp"]); ;
FlexigridObject fo = new FlexigridObject();
fo.page = pageNo;
fo.total = 100;
for (int i = (pageNo - 1) * pageNum + 1; i <= pageNum*pageNo;i++)
{
FlexigridRow fr = new FlexigridRow() { id = i.ToString(),
cell = new List<string>() { i.ToString(), "bb" + i.ToString(), "cc" + i.ToString() } };
fo.rows.Add(fr);
}
JavaScriptSerializer js = new JavaScriptSerializer();
string outStr = js.Serialize(fo);
context.Response.Write(outStr);
}
注意：
Int32.Parse(context.Request["page"]);这样一段代码。前台发起ajax请求的时候， url: 'Handler/TestFlexGrid.ashx', url里没有带参数啊，你怎么获取参数呢？呵呵，flexgrid.js里自动传过来的，page参数，rp参数。。前面我们介绍过。。。total属性，我赋值是100，因为我造了100行数组，只不过每次返回10行。。
运行咱们的程序，效果是这样的：如图1：
图1
OK，搞定。可能你要问，翻页的时候怎么办啊？还能用后台分页吗？你可以试一下，点next page的时候，后台处理程序获得的page值会自动加，怎么实现的，看看flexgrid的源码吧，哈哈。
另外total设置100哦，不然分页条上数据的显示肯定不正确哦。
我的开发环境是VS2010+asp.net WebForms +C#