搜索
//最近要写一个分页的功能，找了很多的ajax分页资料，都觉得不是很好，本来想用ext的，可是觉得速度有点慢，在加上公司明确要求用jquery+json实现分页，没办法，后来发现jquery的flexgrid的分页还不错。就花了点时间写了个。@ControllerpublicclassInfoIssueActionextendsPBaseAction{publicInfoIssueAction(){};@AutowiredInfoIssueServiceinfoIssueService;Listrows=newArrayList();protectedintrp;protectedintpage=1;protectedinttotal;@SuppressWarnings(unchecked)publicStringshowInfoIssue(){intstartIndex=(page-1)*rp;//计算查询开始数据下标total=infoIssueService.getAllInfoIssue().size();Listlist=infoIssueService.getInfoIssue(startIndex,rp);for(Iteratoriterator=list.iterator();iterator.hasNext();){InfoIssueinfoissue=(InfoIssue)iterator.next();MapcellMap=newHashMap();cellMap.put(issueid,infoissue.getIssueid());cellMap.put(cell,newObject[]{infoissue.getIssueid(),infoissue.getCaption(),infoissue.getAttribute(),infoissue.getMaketop(),infoissue.getIssued()});rows.add(cellMap);}returnlistSuccess;}@JSON(name=rows)publicListgetRows(){returnrows;}publicvoidsetRows(Listrows){this.rows=rows;}publicintgetRp(){returnrp;}publicvoidsetRp(intrp){this.rp=rp;}publicintgetPage(){returnpage;}publicvoidsetPage(intpage){this.page=page;}publicintgetTotal(){returntotal;}publicvoidsetTotal(inttotal){this.total=total;}}//jsp代码://需要导入文件,:linkrel=stylesheettype=text/csshref=grid/css/flexigrid/flexigrid.css/linkscripttype=text/javascriptsrc=page/js/jquery.js/scriptscripttype=text/javascriptsrc=page/grid/flexigrid.js/scriptdivclass=bborderxtableid=flex1style=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});functiontest(com,grid){if(com=='ɾ³�{confirm('ˇ·��+$('.trSelected',grid).length+'͵¼Ȃ¼ð?')}elseif(com=='ն¼ѧ){alert('ն¼Ԓ»͵£¡');}}现在比较主流的技术,在视图层所使用的表格控件,本来是打算使用功能比较强大的dhtmlxgrid的,但是在这个表格控件的样式不好定义,使用默认的样式和我想要的UI样式不协调,最后决定使用jquery的一个插件表格flexigrid,在集成和使用的过程中遇到了一些问题,实在让我郁闷得很,但最终还是一一解决了.在些做一个小结.有不对的地方希望各位大虾不要拍砖.对于struts2和spring+hibernate的集成没什么好说的网上有好多这方面的资料,在些就不讲解了.只讲一下如何使用json传输数据.在stuts2中使用json传输数据,需要使用到一个struts2的插件jsonplugin,在网上下载后,直接考到类路径下面就可以了,需要在struts2的配置sturts.xml文件里中里修改一下如下:1,packagename=luanmadAjaxTreeextends=json-default//包要继承这个,因为jsonplugin自己带了一个配置文件struts-plugin.xml,里面继承了struts-default包,文件如下:?xmlversion=1.0encoding=UTF-8?!DOCTYPEstrutsPUBLIC-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN=json-defaultextends=struts-defaultresult-typesresult-typename=jsonclass=com.googlecode.jsonplugin.JSONResult//result-typesinterceptorsinterceptorname=jsonclass=com.googlecode.jsonplugin.JSONInterceptor//interceptors/package/struts2,修改action的返回值类型,当使用这个插件以后,可以不返回任何视图,直接返回json数据.交由js处理actionname=democlass=demomethod=listresulttype=json/result/action后台基本配置好了,下面就是对前台的一个整合下载jquery和flexigrid包含到页面,注意顺序,先jquery.js在flexigrid.js.表格初如化1,定义表格容器,对flexigrid是需要有个表格容器才能显示的;tableid=flexigrid/table2,初始化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插件的高度，单位为px2.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:‘ConnectionError’,//错误提升信息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,pleasewait…’,//正在处理的提示信息22.query:”,//搜索查询的条件23.qtype:”,//搜索查询的类别24.nomsg:‘Noitems’,//无结果的提示信息25.minColToggle:1,//minimumallowedcolumntobehidden26.showToggleBtn:true,//showorhidecolumntogglepopup27.hideOnSubmit:true,//隐藏提交28.autoload:true,//自动加载29.blockOpacity:0.5,//透明度设置30.onToggleCol:false,//当在行之间转换时31.onChangeSort:false,//当改变排序时32.onSuccess:false,//成功后执行33.onSubmit:false//调用自定义的计算函数下面就是最主要的一点,把返回的json格式的数据填到表格里后台业务代码我就不写了,这里主要讲一下返回的json格式,前几天就是因为返回的格式不对,表格里老是显示不出来数据,郁闷得很.flexigrid要求