在Struts2.0中使用JSON结合DWR和EXT

techno_it

浏览: 54534 次
性别:
来自: 北京

最近访客更多访客>>

mianjifen_mianjifen

天度tend

progand

hot66hot

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT DWR json JavaScript F#

如题，大家在Struts2.0中使用json是一般都选择了jsonplugin，我对jsonplugin不太熟悉，因此我选择了json-lib这个jar包。不知道jsonplugin对bean的支持是不是很好，还是只能对action进行序列化。好了现在说一下我的思路。

我先用Json-lib将我的bean进行序列化，当然此过程是放在了我的一个service中的。然后配置DWR公开service的接口。在EXT调用DWR的过程中可能会有些小麻烦，因为EXT官方的程序中没有支持DWR做数据源。在网上找到一个强人写的可做EXT数据源的DWRJS略加修改就成了我的DWRJSONJS，只是小小的改动了一下。下面贴一下布分代码。

这是我改过的JS：

js 代码

Ext.data.DWRProxy = function(dwrCall, pagingAndSort)
{
Ext.data.DWRProxy.superclass.constructor.call(this);
this.dwrCall = dwrCall;
//this.args = args;
this.pagingAndSort = (pagingAndSort!=undefined ? pagingAndSort : true);
};
Ext.extend
(
Ext.data.DWRProxy,
Ext.data.DataProxy,
{
load : function(params, reader, callback, scope, arg)
{
if(this.fireEvent("beforeload", this, params) !== false)
{
var sort;
if(params.sort && params.dir)
sort = params.sort + ' ' + params.dir;
else
sort = '';
var delegate = this.loadResponse.createDelegate(this, [reader, callback, scope, arg], 1);
var callParams = new Array();
if(arg.arg)
{
callParams = arg.arg.slice();
}
if(this.pagingAndSort)
{
callParams.push(params.start);
callParams.push(params.limit);
callParams.push(sort);
}
callParams.push(delegate);
this.dwrCall.apply(this, callParams);
}
else
{
callback.call(scope || this, null, arg, false);
}
},
loadResponse : function(listRange, reader, callback, scope, arg)
{
var result;
try
{
result = reader.readRecords(listRange.evalJSON());
}
catch(e)
{
this.fireEvent("loadexception", this, null, response, e);
callback.call(scope, null, arg, false);
return;
}
callback.call(scope, result, arg, true);
},
update : function(dataSet){},
updateResponse : function(dataSet)
{}
}
);
Ext.data.ListRangeReader = function(meta, recordType)
{
Ext.data.ListRangeReader.superclass.constructor.call(this, meta, recordType);
this.recordType = recordType;
};
Ext.extend
(
Ext.data.ListRangeReader,
Ext.data.DataReader,
{
getJsonAccessor: function()
{
var re = /[\[\.]/;
return function(expr)
{
try
{
return(re.test(expr))? new Function("obj", "return obj." + expr): function(obj){return obj[expr];};
}
catch(e)
{}
return Ext.emptyFn;
};
}(),
read : function(o)
{
var recordType = this.recordType, fields = recordType.prototype.fields;
//Generate extraction functions for the totalProperty, the root, the id, and for each field
if (!this.ef)
{
if(this.meta.totalProperty)
{
this.getTotal = this.getJsonAccessor(this.meta.totalProperty);
}
if(this.meta.successProperty)
{
this.getSuccess = this.getJsonAccessor(this.meta.successProperty);
}
if (this.meta.id)
{
var g = this.getJsonAccessor(this.meta.id);
this.getId = function(rec)
{
var r = g(rec);
return (r === undefined || r === "") ? null : r;
};
}
else
{
this.getId = function(){return null;};
}
this.ef = [];
for(var i = 0; i < fields.length; i++)
{
f = fields.items[i];
var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
this.ef[i] = this.getJsonAccessor(map);
}
}
var records = [];
var root = o.data, c = root.length, totalRecords = c, success = true;
if(this.meta.totalProperty)
{
var v = parseInt(this.getTotal(o), 10);
if(!isNaN(v))
{
totalRecords = v;
}
}
if(this.meta.successProperty)
{
var v = this.getSuccess(o);
if(v === false || v === 'false')
{
success = false;
}
}
for(var i = 0; i < c; i++)
{
var n = root[i];
var values = {};
var id = this.getId(n);
for(var j = 0; j < fields.length; j++)
{
f = fields.items[j];
var v = this.ef[j](n);
values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
}
var record = new recordType(values, id);
records[i] = record;
}
return{
success : success,
records : records,
totalRecords : totalRecords
};
}
}
);

注：上面程序中的reader没有作用了。我用的是EXT中的JSONREADER。

下面是EXTGrid的代码：

js 代码

<#macro ext name dwrclass dwrfunction>
<script type=< span="">"text/javascript" src="<@s.url value='/pubjs/ext-dwr.js'/>"></script>
<script type='text javascript' src="</span">"<@s.url value='/dwr/interface/${dwrclass}.js'/>"></script>
<script type='text javascript' src="</span">"<@s.url value='/dwr/engine.js'/>"></script>
<script type='text javascript' src="</span">"<@s.url value='/dwr/util.js'/>"></script>
<script type=< span="">"text/javascript">
var ds;
var GridUI = function()
{
var grid; //component
var columnModel; // definition of the columns
if('${name}'=='userList')
{
function initDataSource()
{
ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(${dwrclass}.${dwrfunction}, true),
reader: new Ext.data.JsonReader(
<@s.property value="listDetail"/>),
remoteSort: false
});
ds.on("load", function () {
});
}
function getColumnModel()
{
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
<@s.property value="listClounmModel"/>
);
columnModel.defaultSortable = true;
}
return columnModel;
}
}
else if('${name}'=='roleList')
{
function initDataSource()
{
ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(${dwrclass}.${dwrfunction}, true),
reader: new Ext.data.JsonReader(
<@s.property value="roleDetail"/>),
remoteSort: false
});
ds.on("load", function () {
});
}
function getColumnModel()
{
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
<@s.property value="roleClounmModel"/>
);
columnModel.defaultSortable = true;
}
return columnModel;
}
}
else if('${name}'=='permList')
{
function initDataSource()
{
ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(${dwrclass}.${dwrfunction}, true),
reader: new Ext.data.JsonReader(
<@s.property value="PermissionDetail"/>),
remoteSort: false
});
ds.on("load", function () {
});
}
function getColumnModel()
{
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
<@s.property value="PermissionClounmModel"/>
);
columnModel.defaultSortable = true;
}
return columnModel;
}
}
function buildGrid()
{
grid = new Ext.grid.Grid(
'${name}',
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true
}
);
grid.render();
grid.getSelectionModel().selectFirstRow();
//鍙抽敭鑿滃崟
grid.addListener('rowcontextmenu', contextmenu);
var gridFoot = grid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar
(
gridFoot,
ds,
{
pageSize:<@s.property value="perPageCount"/>,
displayInfo:true,
beforePageText:'<@s.text name="System.list.page"/>',
afterPageText:'<@s.text name="System.list.pagedetails"/>',
displayMsg: '<@s.text name="System.list.gridList"/>'
}
);
/*paging.add
(
'_',
{
pressed: true,
enableToggle:true,
text: '<@s.text name="System.list.details"/>',
cls: 'x-btn-text-icon details',
toggleHandler: toggleDetails
}
);*/
}
function toggleDetails(btn, pressed)
{
if(pressed)
{
alert('Oh!Who hit me?');
}
}
return{
init : function() {
initDataSource();
ds.load({params:{start:0, limit:<@s.property value="perPageCount"/>}, callback:callme});
buildGrid();
},
getStore: function() {
return ds;
}
}
}();
function callme(tt)
{
}
Ext.onReady(GridUI.init, GridUI, true);
</script>

以下是业务程的代码。

java 代码

public JSONObject getPageData(String queryString, int cpage, int pageSize,Serializable[] params) throws DFLogError
{
List results;
JPage pageData = null;
int total;
Session s = this.getSession();
try
{
Query query = this.getQuery(queryString, params, s);
total = query.list().size();
results = query.setFirstResult(cpage).setMaxResults(pageSize).list();
pageData = new JPage(total, cpage);
pageData.setData(results);
return JSONObject.fromBean(pageData,StringUtils.commaDelimitedListToStringArray("roles,authorities"));
}
catch (HibernateException e)
{
log.error("Error in BaseDao.getPageData(String hql, int cpage, int pageSize)",e);
throw new DFLogError("Error in BaseDao.getPageData(String hql, int cpage, int pageSize)",e);
}
finally
{
this.closeSession(s);