jQuery flexgrid 学习

网址：
http://sanderkorvemaker.nl/test/flexigrid/
http://code.google.com/p/flexigrid/downloads/detail?name=flexigrid.zip

//获取被选中的行的单元格的内容,eq( [0-9]+ )
function getselected() {
$("td:eq(0)",$('.flexme2 .trSelected')).each(function(){
alert($(this).text());
});
};
//全选
function setselectall() {
$('.flexme2 tr').removeClass('trSelected');
$('.flexme2 tr').addClass('trSelected');
};
//反选
function setselectinv() {
$('.flexme2 tr').toggleClass('trSelected');
};
//设置是否单选 $('.flexme2').flexigrid({singleSelect:true});

/*增加“全选、反选”按钮
buttons : [
{name: 'SelAll', onpress : setsel},
{name: 'SelInv', onpress : setsel},
{separator: true}
]
*/
function setsel(com,grid) {
if (com=='SelAll') {
$('.trSelected'.grid).removeClass('trSelected');
$('tr',grid).addClass('trSelected');
}
else if (com=='SelInv') {
$('tr',grid).toggleClass('trSelected');
}
};
=====================
java 代码：

@Controller
public class InfoIssueAction extends PBaseAction {
public InfoIssueAction(){};
@Autowired
InfoIssueService infoIssueService;

List rows=new ArrayList();
protected int rp;
protected int page=1;
protected int total;

@SuppressWarnings("unchecked")
public String showInfoIssue(){
int startIndex = (page - 1) * rp; //计算查询开始数据下标
total=infoIssueService.getAllInfoIssue().size();
List list=infoIssueService.getInfoIssue(startIndex, rp);
for (Iterator iterator = list.iterator(); iterator.hasNext();) {
InfoIssue infoissue = (InfoIssue) iterator.next();
Map cellMap = new HashMap();
cellMap.put("issueid", infoissue.getIssueid());
cellMap.put("cell", new Object[] {infoissue.getIssueid(),infoissue.getCaption(),
infoissue.getAttribute(),infoissue.getMaketop(),infoissue.getIssued()});
rows.add(cellMap);

}
return "listSuccess";
}


@JSON(name="rows")
public List getRows() {
return rows;
}

public void setRows(List rows) {
this.rows = rows;
}

public int getRp() {
return rp;
}

public void setRp(int rp) {
this.rp = rp;
}

public int getPage() {
return page;
}


public void setPage(int page) {
this.page = page;
}


public int getTotal() {
return total;
}

public void setTotal(int total) {
this.total = total;
}

}





jsp代码:

需要导入文件,:

<link rel="stylesheet" type="text/css" href="grid/css/flexigrid/flexigrid.css"></link>
<script type="text/javascript" src="page/js/jquery.js"></script>
<script type="text/javascript" src="page/grid/flexigrid.js"></script>



<div class="bborderx">
<table id="flex1" style="display:none"></table>
</div>



js代码:

$("#flex1").flexigrid
(
{
url: 'infoIssue/InfoIssue!show.action',
dataType: 'json',
colModel : [
{display: '编号', name : 'issueid', width : 60, sortable : true, align: 'center'},
{display: '标题', name : 'caption', width : 120, sortable : true, align: 'left'},
{display: '是否置顶', name : 'maketop', width : 120, sortable : true, align: 'left'},
{display: '是否发布', name : 'issued', width : 120, sortable : true, align: 'left'}
],
buttons : [
{name: '增加', bclass: 'add', onpress : test},
{name: '删除', bclass: 'delete', onpress : test},
{separator: true}
],
searchitems : [
{display: '标题', name : 'caption', isdefault: true}
],
sortname: "issueid",
sortorder: "asc",
usepager: true,
title: '新闻发布 ',
useRp: true,
rp: 1,
showTableToggleBtn: true,
width: 600,
height: 300
}
);
function test(com,grid)
{
if (com=='删除')
{
confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')
}
else if (com=='增加')
{
alert('增加一条！');
}
}
=====================
表格初如化

1,定义表格容器,对flexigrid是需要有个表格容器才能显示的;

<table id="flexigrid"></table>

2,初始化

<script>

$(document).ready(function(){
$("#grid").flexigrid({
url: "demo.action",
dataType: 'json',
colModel : [{display: '编号', name : 'id', width : 20, sortable : true, align: 'center'},
{display: '姓名, name : 'name', width : 180, sortable : true, align: 'left'},
{display: '生日', name : 'bathday', width : 60, sortable : true, align: 'left'},
{display: '年龄, name : 'age', width : 60, sortable : true, align: 'left'}],
sortname: "id",
sortorder: "desc",
usepager: true,
title: '表头名称',
useRp: false,
rp: 10,
showTableToggleBtn: true,
procmsg: '正在加载数据,请稍等...'

</script>

还有许多参数,具体作用如下:

1. height: 200, //flexigrid插件的高度，单位为px
2. width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算
3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
4. novstripe: false,
5. minwidth: 30, //列的最小宽度
6. minheight: 80, //列的最小高度
7. resizable: true, //是否可伸缩
8. url: false, //ajax方式对应的url地址
9. method: ‘POST’, // 数据发送方式
10. dataType: ‘xml’, // 数据加载的类型
11. errormsg: ‘Connection Error’,//错误提升信息
12. usepager: false, //是否分页
13. nowrap: true, //是否不换行
14. page: 1, //默认当前页
15. total: 1, //总页面数
16. useRp: true, //是否可以动态设置每页显示的结果数
17. rp: 15, // 每页默认的结果数
18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
19. title: false,//是否包含标题
20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式
21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息
22. query: ”,//搜索查询的条件
23. qtype: ”,//搜索查询的类别
24. nomsg: ‘No items’,//无结果的提示信息
25. minColToggle: 1, //minimum allowed column to be hidden
26. showToggleBtn: true, //show or hide column toggle popup
27. hideOnSubmit: true,//隐藏提交
28. autoload: true,//自动加载
29. blockOpacity: 0.5,//透明度设置
30. onToggleCol: false,//当在行之间转换时
31. onChangeSort: false,//当改变排序时
32. onSuccess: false,//成功后执行
33. onSubmit: false // 调用自定义的计算函数

下面就是最主要的一点,把返回的json格式的数据填到表格里

后台业务代码我就不写了,这里主要讲一下返回的json格式,前几天就是因为返回的格式不对,表格里老是显示不出来数据,郁闷得很.

flexigrid要求的返回格式,

{
"total":111, //数据总数
"page":4, //页码(第几页)

"rows":[
{"id":"1","cell":["a","b","c","e"]},
{"id":"2","cell":["a","b","c","e"]},
{"id":"3","cell":["a","b","c","e"]},
{"id":"4","cell":["a","b","c","e"]},
]}

格式一定要按照上面的来,要不然就是显示不出来,如果json格式是自己转换的话,但是不难,问题是,我们使用了插件,插件会自动帮我们转换,但是按照一般的来处理就会导致转换出来的格式不对,我在这里说一下.几种类型的转成json后的返回值:

map

{"map名":{}}转换时会自动在前面加上一个map后面才是值

{"map":{"id":2,"age":22,"name":"zhang","bathday":"2009-08-09"}}

list

{"list名":{}}同上

{"list":[{"age":12,"bathday":"2009-10-11","id":1,"name":"deng"},{"age":22,"bathday":"2009-08-09","id":2,"name":"zhang"}]}

javaBean

{"bean名":{}}同上

{"dean":{"age":12,"bathday":"2009-10-11","id":1,"name":"deng"}}

直接返变量

{"":"","":""}

{"age":22,"bathday":"2009-08-09","id":2,"name":"zhang"}

从上面几种返回格式,我们就可以去构造flexigrid所需要的数据格式了

{
"total":111, //数据总数
"page":4, //页码(第几页)

"rows":[
{"id":"1","cell":["a","b","c","e"]},
{"id":"2","cell":["a","b","c","e"]},
{"id":"3","cell":["a","b","c","e"]},
{"id":"4","cell":["a","b","c","e"]},
]}

里面有变量的返回类型,有list的返回类型,有map的返回类型

构造

private bean//这是你的bean类

private total;

private page;

private Map map=new HashMap()

private List rows=new ArrayList();//这里有一个List返回,所以名字起成rows

生成相应的get和set 方法

map.put("id","1");//对应"id":"1","

map.put("cell",new Object{bean.getA(),bean.getB()......})//对应cell":["a","b","c","e"]

rows.add(map);//对应"rows":[
{"id":"1","cell":["a","b","c","e"]},
{"id":"2","cell":["a","b","c","e"]},
{"id":"3","cell":["a","b","c","e"]},
{"id":"4","cell":["a","b","c","e"]},
]}

total="100""total":111, //数据总数
pate="2"//"page":4, //页码(第几页)

这样就可以构造出正确的数据格式
==============
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>flexgrid Test</title>
<link rel="stylesheet" href="../css/flexigrid/flexigrid.css"
type="text/css"></link>
<script type="text/javascript" src="../lib/jquery/jquery.js"></script>
<script type="text/javascript" src="../flexigrid.js"></script>
<script type="text/javascript">

$().ready(function() {
$(".flex2").flexigrid
(
{
url: 'post.jsp',
dataType: 'json',
colModel : [
{display: '操作', name : 'operation', width : 60, sortable : true, align: 'center'},
{display: '编号', name : 'id', width : 60, sortable : true, align: 'center'},
{display: '姓名', name : 'name', width : 120, sortable : true, align: 'left'},
{display: '密码', name : 'iso3', width : 120, sortable : true, align: 'left', hide: true},
{display: '年龄', name : 'managename', width : 120, sortable : true, align: 'left'},
{display: '住址', name : 'data', width : 120, sortable : true, align: 'left'}
],

searchitems : [
{display: '姓名', name : 'username', isdefault: true},
{display: '住址', name : 'address'}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: '人员管理',
useRp: true,
total: 10,
rp: 10,
showTableToggleBtn: true,
width: 600,
height: 300,
procmsg: '加载中, 请稍等 ...'
}
);

});
</script>
</head>
<body>
<input id="hidden" type="hidden" name="hidden" value="null" />
<table class="flex2" ></table>
</body>
</html>
flexgrid在每一次点击排序，查询，翻页等动作的时候均会调用url指向的链接，进入链接方法，我们可以看到request中可以取到页面上的一些参数，默认的貌似就这6个，分别是需要排序的表格头id,排序的方式，分页大小，分页的第几页，查询的条件，查询的输入内容，根据这些参数，我们可以在后台组成各种各样的数据集，最后采用json的方式传递出去。

页面接到传递过来的json数据，按照json中数据的顺序，顺次显示在table标签内。

json构成的时候一些描述是固定的，譬如page,total,rows,cell等，不能写错了。

由于json中的内容均是string格式的，我们可以直接写上string格式的html，页面解释的时候就可以输出除了文本外的一些其他格式，譬如我这个例子里面，第一列在页面上显示的就是一个img.