嗯,最近做一个程序,不想用微软那个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#