flexgrid的json格式说明.docx

//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,//包要继承这个,因为jsonplugin自己带了一个配置文件struts-plugin.xml,里面继承了struts-default包,文件如下:

xmlversion="1.0"encoding="UTF-8"?

>

DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"

"http:

//struts.apache.org/dtds/struts-2.0.dtd">

2,修改action的返回值类型,当使用这个插件以后,可以不返回任何视图,直接返回json数据.交由js处理

后台基本配置好了,下面就是对前台的一个整合

下载jquery和flexigrid包含到页面,注意顺序,先jquery.js在flexigrid.js.

表格初如化

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:

‘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,//minimumallowedcolumntobehidden

26.showToggleBtn:

true,//showorhidecolumntogglepopup

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的返回类型

构造

privatebean//这是你的bean类

privatetotal;

privatepage;

privateMapmap=newHashMap（）

privateListrows=newArrayList（）;//这里有一个List返回,所以名字起成rows

生成相应的get和set方法

map.put（"id","1"）;//对应"id":

"1","

map.put（"cell",newObject{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,//页码（第几页）

这样就可以构造出正确的数据格式