您现在的位置: 365建站网 > 365学习 > struts2+spring+hibernate+json+jquery+flexigrid集成和在集成过程中需要注意的

struts2+spring+hibernate+json+jquery+flexigrid集成和在集成过程中需要注意的

文章来源:365jz.com     点击数:4981    更新时间:2009-09-28 09:22   参与评论

      好久都没有写博客了,这久公司正在做一个项目,原来是打算使用原来做OA系统时使用的框架的,但是又觉得个框架所使用的技术有点老了,想重新集成一个新框架,最后决定使用现在比较主流的技术,在视图层所使用的表格控件,本来是打算使用功能比较强大的dHTMLxgrid的,但是在这个表格控件的样式不好定义,使用默认的样式和我想要的UI样式不协调,最后决定使用jQuery的一个插件表格flexigrid,在集成和使用的过程中遇到了一些问题,实在让我郁闷得很,但最终还是一一解决了.在些做一个小结.有不对的地方希望各位大虾不要拍砖.

     对于struts2和spring+hibernate的集成没什么好说的网上有好多这方面的资料,在些就不讲解了.只讲一下如何使用json传输数据.

     在stuts2中使用json传输数据,需要使用到一个struts2的插件jsonplugin,在网上下载后,直接考到类路径下面就可以了,需要在struts2的配置sturts.XML文件里中里修改一下如下:

  1,  <package name="luanmadajaxTree" extends="json-default" >//包要继承这个,因为jsonplugin自己带了一个配置文件struts-plugin.xml,里面继承了struts-default包,文件如下:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
    <package name="json-default" extends="struts-default">
        <result-types>
            <result-type name="json" class="com.googlecode.jsonplugin.JSONResult"/>
        </result-types>
        <interceptors>
            <interceptor name="json" class="com.googlecode.jsonplugin.JSONInterceptor"/>
        </interceptors>
    </package>
</struts>
2, 修改action的返回值类型,当使用这个插件以后,可以不返回任何视图,直接返回json数据.交由js处理

    <action name="demo" class="demo" method="list" >
   <result  type="json"></result>
  </action>

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

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

表格初如化

   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, //页码(第几页)

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

当然,可能还有其它方法,本人出正在学习中,只是把我在学习过程中的一体会跟大家分享一下.

 

  

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (4981人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------