好久都沒有寫博客了,這久公司正在做一個項目,原來是打算使用原來做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>
還有許多參數,具體作用如下:
- height: 200, //flexigrid插件的高度，單位爲px
- width: ‘auto’, //寬度值，auto表示根據每列的寬度自動計算
- striped: true, //是否顯示斑紋效果，默認是奇偶交互的形式
- novstripe: false,
- minwidth: 30, //列的最小寬度
- minheight: 80, //列的最小高度
- resizable: true, //是否可伸縮
- url: false, //ajax方式對應的url地址
- method: ‘POST’, // 數據發送方式
- dataType: ‘xml’, // 數據加載的類型
- errormsg: ‘Connection Error’,//錯誤提升信息
- usepager: false, //是否分頁
- nowrap: true, //是否不換行
- page: 1, //默認當前頁
- total: 1, //總頁面數
- useRp: true, //是否可以動態設置每頁顯示的結果數
- rp: 15, // 每頁默認的結果數
- rpOptions: [10,15,20,25,40],//可選擇設定的每頁結果數
- title: false,//是否包含標題
- pagestat: ‘Displaying {from} to {to} of {total} items’,//顯示當前頁和總頁面的樣式
- procmsg: ‘Processing, please wait …’,//正在處理的提示信息
- query: ”,//搜索查詢的條件
- qtype: ”,//搜索查詢的類別
- nomsg: ‘No items’,//無結果的提示信息
- minColToggle: 1, //minimum allowed column to be hidden
- showToggleBtn: true, //show or hide column toggle popup
- hideOnSubmit: true,//隱藏提交
- autoload: true,//自動加載
- blockOpacity: 0.5,//透明度設置
- onToggleCol: false,//當在行之間轉換時
- onChangeSort: false,//當改變排序時
- onSuccess: false,//成功後執行
- 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, //頁碼(第幾頁)
這樣就可以構造出正確的數據格式
當然,可能還有其它方法,本人出正在學習中,只是把我在學習過程中的一體會跟大家分享一下.