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.