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代码:

需要导入文件,:

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是需要有个表格容器才能显示的;



   2,初始化

  

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

   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"%>





type="text/css">









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

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

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

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

• griddemo.rar (137.9 KB)
• 下载次数: 174