好久都沒有寫博客了,這久公司正在做一個(gè)項(xiàng)目,原來(lái)是打算使用原來(lái)做OA系統(tǒng)時(shí)使用的框架的,但是又覺得個(gè)框架所使用的技術(shù)有點(diǎn)老了,想重新集成一個(gè)新框架,最后決定使用現(xiàn)在比較主流的技術(shù),在視圖層所使用的表格控件,本來(lái)是打算使用功能比較強(qiáng)大的dhtmlxgrid的,但是在這個(gè)表格控件的樣式不好定義,使用默認(rèn)的樣式和我想要的UI樣式不協(xié)調(diào),最后決定使用jquery的一個(gè)插件表格flexigrid,在集成和使用的過(guò)程中遇到了一些問題,實(shí)在讓我郁悶得很,但最終還是一一解決了.在些做一個(gè)小結(jié).有不對(duì)的地方希望各位大蝦不要拍磚.

     對(duì)于struts2和spring+hibernate的集成沒什么好說(shuō)的網(wǎng)上有好多這方面的資料,在些就不講解了.只講一下如何使用json傳輸數(shù)據(jù).

     在stuts2中使用json傳輸數(shù)據(jù),需要使用到一個(gè)struts2的插件jsonplugin,在網(wǎng)上下載后,直接考到類路徑下面就可以了,需要在struts2的配置sturts.xml文件里中里修改一下如下:

  1,  <package name="luanmadAjaxTree" extends="json-default" >//包要繼承這個(gè),因?yàn)閖sonplugin自己帶了一個(gè)配置文件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的返回值類型,當(dāng)使用這個(gè)插件以后,可以不返回任何視圖,直接返回json數(shù)據(jù).交由js處理

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

后臺(tái)基本配置好了,下面就是對(duì)前臺(tái)的一個(gè)整合

下載jquery和flexigrid包含到頁(yè)面,注意順序,先jquery.js在flexigrid.js.

表格初如化

   1,定義表格容器,對(duì)flexigrid是需要有個(gè)表格容器才能顯示的;

<table id="flexigrid"></table>

   2,初始化

   <script>

 $(document).ready(function(){
  $("#grid").flexigrid({
 url: "demo.action",
 dataType: 'json',
 colModel : [{display: '編號(hào)', 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: '正在加載數(shù)據(jù),請(qǐng)稍等...'

   </script>

還有許多參數(shù),具體作用如下:

1. height: 200, //flexigrid插件的高度，單位為px   
2. width: ‘auto’, //寬度值，auto表示根據(jù)每列的寬度自動(dòng)計(jì)算   
3. striped: true, //是否顯示斑紋效果，默認(rèn)是奇偶交互的形式   
4. novstripe: false,   
5. minwidth: 30, //列的最小寬度   
6. minheight: 80, //列的最小高度   
7. resizable: true, //是否可伸縮   
8. url: false, //ajax方式對(duì)應(yīng)的url地址   
9. method: ‘POST’, // 數(shù)據(jù)發(fā)送方式   
10. dataType: ‘xml’, // 數(shù)據(jù)加載的類型   
11. errormsg: ‘Connection Error’,//錯(cuò)誤提升信息   
12. usepager: false, //是否分頁(yè)   
13. nowrap: true, //是否不換行   
14. page: 1, //默認(rèn)當(dāng)前頁(yè)   
15. total: 1, //總頁(yè)面數(shù)   
16. useRp: true, //是否可以動(dòng)態(tài)設(shè)置每頁(yè)顯示的結(jié)果數(shù)   
17. rp: 15, // 每頁(yè)默認(rèn)的結(jié)果數(shù)   
18. rpOptions: [10,15,20,25,40],//可選擇設(shè)定的每頁(yè)結(jié)果數(shù)   
19. title: false,//是否包含標(biāo)題   
20. pagestat: ‘Displaying {from} to {to} of {total} items’,//顯示當(dāng)前頁(yè)和總頁(yè)面的樣式   
21. procmsg: ‘Processing, please wait …’,//正在處理的提示信息   
22. query: ”,//搜索查詢的條件   
23. qtype: ”,//搜索查詢的類別   
24. nomsg: ‘No items’,//無(wú)結(jié)果的提示信息   
25. minColToggle: 1, //minimum allowed column to be hidden   
26. showToggleBtn: true, //show or hide column toggle popup   
27. hideOnSubmit: true,//隱藏提交   
28. autoload: true,//自動(dòng)加載   
29. blockOpacity: 0.5,//透明度設(shè)置   
30. onToggleCol: false,//當(dāng)在行之間轉(zhuǎn)換時(shí)   
31. onChangeSort: false,//當(dāng)改變排序時(shí)   
32. onSuccess: false,//成功后執(zhí)行   
33. onSubmit: false // 調(diào)用自定義的計(jì)算函數(shù)   

下面就是最主要的一點(diǎn),把返回的json格式的數(shù)據(jù)填到表格里

     后臺(tái)業(yè)務(wù)代碼我就不寫了,這里主要講一下返回的json格式,前幾天就是因?yàn)榉祷氐母袷讲粚?duì),表格里老是顯示不出來(lái)數(shù)據(jù),郁悶得很.

     flexigrid要求的返回格式,

{
"total":111, //數(shù)據(jù)總數(shù)
"page":4, //頁(yè)碼(第幾頁(yè))

"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"]},
]}

格式一定要按照上面的來(lái),要不然就是顯示不出來(lái),如果json格式是自己轉(zhuǎn)換的話,但是不難,問題是,我們使用了插件,插件會(huì)自動(dòng)幫我們轉(zhuǎn)換,但是按照一般的來(lái)處理就會(huì)導(dǎo)致轉(zhuǎn)換出來(lái)的格式不對(duì),我在這里說(shuō)一下.幾種類型的轉(zhuǎn)成json后的返回值:

map

{"map名":{}}轉(zhuǎn)換時(shí)會(huì)自動(dòng)在前面加上一個(gè)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"}

從上面幾種返回格式,我們就可以去構(gòu)造flexigrid所需要的數(shù)據(jù)格式了

{
"total":111, //數(shù)據(jù)總數(shù)
"page":4, //頁(yè)碼(第幾頁(yè))

"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"]},
]}

里面有變量的返回類型,有l(wèi)ist的返回類型,有map的返回類型

構(gòu)造

private bean//這是你的bean類

private total;

private page;

private Map map=new HashMap()

private List rows=new ArrayList();//這里有一個(gè)List返回,所以名字起成rows

生成相應(yīng)的get和set 方法

map.put("id","1");//對(duì)應(yīng)"id":"1","

map.put("cell",new Object{bean.getA(),bean.getB()......})//對(duì)應(yīng)cell":["a","b","c","e"]

rows.add(map);//對(duì)應(yīng)"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, //數(shù)據(jù)總數(shù)
  pate="2"http://"page":4, //頁(yè)碼(第幾頁(yè))

這樣就可以構(gòu)造出正確的數(shù)據(jù)格式

當(dāng)然,可能還有其它方法,本人出正在學(xué)習(xí)中,只是把我在學(xué)習(xí)過(guò)程中的一體會(huì)跟大家分享一下.

• jquery
• JSON