Ext + struts2的方式,如何传递数组到后台

需求:
为了很方便的批量修改数据,存在着将数据批量传递到后台的场景
[color=darkred]1.数组的方式[/color]
如我们一次选择了多个文件,需要将多个选择的文件的文件路径传递到后台(获取文件路径是采用applet的方式,可能是安全的原因FF中获取不到文件路径)

submitFiles:function() {
var fileNodes = Ext.query('//input[@name="files"]','inputDiv');
var fileNames = "{";
for (i = 0; i < fileNodes.length; i++) {
if (i != fileNodes.length - 1)
fileNames += "'fileNameList[" + i + "]':'" + fileNodes[i].value + "',";
else
fileNames += "'fileNameList[" + i + "]':'" + fileNodes[i].value + "'";
}
fileNames += "}";
var submitCallback = function(jsonData){
Global.outputInfo('info','submit success');
}

//replace the '\' to the '\\'
var myPat = /%5C/g; //this is using regular expression to define the escaped version of a backslash
fileNames = escape(fileNames);
fileNames = fileNames.replace(myPat,"%5C%5C");
fileNames = unescape(fileNames);
RemoteMethods.RequestSubmitAuditTask(Ext.decode(fileNames),submitCallback,this);
}

类似的html:

<div id="rowDiv_1"><input id="file_1" name="files" size="80" type="text"><input value="Search" onclick="document.FileUploadApplet.openFileDialog('file_1', 'onFileDialogFile', 'onFileDialogCancel')" type="button"><span onclick="Ext.get('rowDiv_1').remove()" style="font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal; color: rgb(0, 0, 15); text-decoration: underline;">remove</span></div><div id="rowDiv_2"><input id="file_2" name="files" size="80" type="text"><input value="Search" onclick="document.FileUploadApplet.openFileDialog('file_2', 'onFileDialogFile', 'onFileDialogCancel')" type="button"><span onclick="Ext.get('rowDiv_2').remove()" style="font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal; color: rgb(0, 0, 15); text-decoration: underline;">remove</span></div><div id="rowDiv_3"><input id="file_3" name="files" size="80" type="text"><input value="Search" onclick="document.FileUploadApplet.openFileDialog('file_3', 'onFileDialogFile', 'onFileDialogCancel')" type="button"><span onclick="Ext.get('rowDiv_3').remove()" style="font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal; color: rgb(0, 0, 15); text-decoration: underline;">remove</span></div><div style="width: 100px; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; text-decoration: underline;" id="tipDiv">Add a New Attach</div>

后台Action中定义一个有set方法的数组,这样提交到后台之后会自动形成List如:

private java.util.List fileNameList;
....

[color=darkred]2.json字符串的方式[/color]
还存在着这样的场景,如可编辑的EditorGridPanel,如果数据是可以修改的,那如何将修改后的数据传给后台,这里就只能传递json字符串了,然后后台手动的映射json字符串到java对象
如定义了一个Grid:

var fm = Ext.form;
// Column Model shortcut array
var cols = [
{id:'header',header: "header", width: 160, sortable: true, dataIndex: 'header',
editor: new fm.TextField({
allowBlank: false
})},
{header: "width", width: 50, sortable: true, dataIndex: 'width',
editor: new fm.NumberField({
allowBlank: false
})},
{header: "align", width: 50, sortable: true, dataIndex: 'align',
editor: new fm.TextField({
allowBlank: false
})}
];
var gridStore = new Ext.data.JsonStore({
fields : fields,
url:'query_columnConfig.do?columnConfig.configType=' + config.configType +"&columnConfig.isInitConfig="+config.isInitConfig+ "&columnConfig.hidden=false",
pruneModifiedRecords :true,
root : 'results'
});
gridStore .load();

// create the destination Grid
this.grid = new Ext.grid.EditorGridPanel({
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
trackMouseOver :true,
autoExpandColumn : 'header',
sm: new Ext.grid.RowSelectionModel({}),
title : 'Visable Grid'
});

当增加或者修改完多行后,提交数据到后台

saveModifiedRow:function(actionName) {
var appendRecordStrFn = function(record) {
record.data.indexNo = this.indexOf(record);
//here this represent the store
modifyRecordStr += Ext.encode(record.data) + ",";
}
var modifyRecordStr = "[";
var modifiedRecords = this.grid.store.getModifiedRecords();
Ext.each(modifiedRecords , appendRecordStrFn, this.grid.store);
modifyRecordStr += "]";
var returnFunction = function() {
alert('success');
}
RemoteMethods.RequestColumnConfigAction(actionName, {jsonData:modifyRecordStr}, returnFunction, this);
}

RemoteMethods:

RemoteMethods = function() {
};
RemoteMethods.prototype = {
RequestColumnConfigAction:function(actionName,condtion, OnSuccess, scope) {
this._invoke(actionName, condtion, OnSuccess, scope);
},

_invoke: function(action, paramsObj, OnSuccess, scope) {
Ext.Ajax.timeout = 100000;
//The timeout in milliseconds to be used for requests,when out of it deduce the error
Ext.Ajax.request({
url:action,
method: 'post',
params:paramsObj,
scope: scope,
callback: function(options, success, response) {
var result = Ext.decode(response.responseText);
if (success) {
if (OnSuccess) {
OnSuccess.call(scope, result);
}
} else {
var msg = (result && result.Message) ? result.Message : 'Some error happend. Please try again';
Ext.MessageBox.alert('Error', msg);
}
}
});

}
}

后台的Action定义一个变量jsonData

private String jsonData;
....
//getter,setter方法
...
public String submit(){
JSONArray jsonArr = JSONArray.fromObject(this.jsonData);
for (int i = 0; i < jsonArr.size(); i++) {
JSONObject jsonObj = jsonArr.getJSONObject(i);
JSONObject.toBean(jsonObj);
ColumnConfig tmpColumnConfig = new ColumnConfig();
jsonObj2JavaObj(jsonObj, tmpColumnConfig);//自动映射为java对象
.....
}
}

public static void jsonObj2JavaObj(JSONObject jsonObj, Object destObj) {
Iterator itor = jsonObj.entrySet().iterator();
while (itor.hasNext()) {
Map.Entry entry = ((Map.Entry) (itor.next()));
String key = entry.getKey().toString();
Object[] values = new Object[]{entry.getValue()};
try {
String method = key.replaceFirst(key.substring(0, 1), key.substring(0, 1).toUpperCase());
Class[] parameterTypes = new Class[]{destObj.getClass().getMethod("get" + method, null).getReturnType()};
Method obj2method = destObj.getClass().getMethod("set" + method, parameterTypes);
if (obj2method == null)//存在源对象比目标对象的成员变量多的情况,就不处理
continue;
obj2method.invoke(destObj, values);
} catch (Exception e) {
logger.error("", e);
}

}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值