editGrid提交json数据后两种jar包的处理方式net.sf.json.JSONObject与org.json.JSONObject
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/ext-all.js"></script>
<!-- 如果使用行编辑器必须引入下面这两个文件 -->
<script type="text/javascript" src="js/extjs/examples/ux/RowEditor.js"></script>
<link rel="stylesheet" type="text/css" href="js/extjs/examples/ux/css/RowEditor.css" />
<script type="text/javascript">
Ext.onReady(function() {
//定义用于表示订单的数组
var data = [{
id: 1,
date: new Date(),
name: "李世民",
address: "中华人民共和国",
bank: "中国人民银行",
isFast: false
},
{
id: 2,
date: new Date(),
name: "搜狗五笔",
address: "北京天安门",
bank: "中国建设银行",
isFast: false
},
{
id: 3,
date: new Date(),
name: "宋江",
address: "中国古代某处",
bank: "中国建设银行",
isFast: true
},
{
id: 4,
date: new Date(),
name: "李宝田",
address: "湖南省株洲市红旗广场",
bank: "中国工商银行",
isFast: false
}];
//定义Proxy
var proxy = new Ext.data.MemoryProxy(data);
var Order = Ext.data.Record.create([{
name: "ID",
type: "int",
mapping: "id"
},
//编号
{
name: "DATE",
type: "date",
mapping: "date"
},
//下单日期
{
name: "NAME",
type: "string",
mapping: "name"
},
//收货人姓名
{
name: "ADDRESS",
type: "string",
mapping: "address"
},
//收货人地址
{
name: "BANK",
type: "string",
mapping: "bank"
},
//交易银行
{
name: "ISFAST",
type: "boolean",
mapping: "isFast"
} //交易银行
]);
//定义Reader
var reader = new Ext.data.JsonReader({},
Order);
//定义Store
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
autoLoad: true,
pruneModifiedRecords: true
});
var banks = [["中国建设银行", "中国建设银行"], ["中国银行", "中国银行"], ["中国工商银行", "中国工商银行"], ["中国人民银行", "中国人民银行"]];
//定义列模型
var cm = new Ext.grid.ColumnModel([{
header: "订单编号",
dataIndex: "ID",
width: 60,
editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank: false
}))
},
{
header: "下单日期",
dataIndex: "DATE",
width: 140,
renderer: Ext.util.Format.dateRenderer("Y-m-d"),
editor: new Ext.grid.GridEditor(new Ext.form.DateField({
format: "Y-m-d"
}))
},
{
header: "收货人姓名",
dataIndex: "NAME",
width: 120,
editor: new Ext.grid.GridEditor(new Ext.form.TextField())
},
{
header: "收货人地址",
dataIndex: "ADDRESS",
id: "ADDRESS",
editor: new Ext.grid.GridEditor(new Ext.form.TextField())
},
{
header: "交易银行",
dataIndex: "BANK",
width: 120,
editor: new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ["value", "text"],
data: banks
}),
displayField: "text",
valueField: "value",
mode: "local",
triggerAction: "all",
readOnly: true,
emptyText: "请选择银行"
})
},
{
header: "快递",
dataIndex: "ISFAST",
width: 70,
renderer: function(v) {
return v ? "快递": "非快递"
},
editor: new Ext.grid.GridEditor(new Ext.form.Checkbox())
}]);
//定义EditGridPanel
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
autoExpandColumn: "ADDRESS",
width: 800,
autoHeight: true,
renderTo: "a",
autoEncode: true,
//提交时是否自动编码
clicksToEdit: 1,
tbar: [{
text: "添加一行",
handler: function() {
var initValue = {
ID: "",
DATE: new Date(),
NAME: "",
ADDRESS: "",
BANK: "",
ISFAST: false
};
var order = new Order(initValue);
grid.stopEditing();
grid.getStore().add(order);
//设置脏数据
order.dirty = true;
//只要一个字段值修改了，该行的所有值都设置成脏标记
order.modified = initValue;
if (grid.getStore().modified.indexOf(order) == -1) {
grid.getStore().modified.push(order);
}
}
},
{
text: "删除一行",
handler: function() {
var sm = grid.getSelectionModel();
if (sm.hasSelection()) {
Ext.Msg.confirm("提示", "真的要删除选中的行吗？",
function(btn) {
if (btn == "yes") {
var cellIndex = sm.getSelectedCell(); //获取被选择的单元格的行和列索引
//alert(cellIndex[0] + "," + cellIndex[1])//打印被选择的单元格的行和列索引
var record = grid.getStore().getAt(cellIndex[0]);
grid.getStore().remove(record);
}
});
} else {
Ext.Msg.alert("错误", "请先选择删除的行，谢谢!");
}
}
},
"-", {
text: "保存",
handler: function() {
var store = grid.getStore();
//得到修改过的Recored的集合
var modified = store.modified.slice(0);
//将数据放到另一个数组中
var jsonArray = [];
Ext.each(modified,
function(m) {
//alert(m.data.ADDRESS);//读取当前被修改的记录的地址
//m.data 中保存的是当前Recored的所有字段的值(json)，不包含结构信息
jsonArray.push(m.data);
});
var r = checkBlank(modified);
if (!r) {
return;
} else {
//通过ajax请求将修改的记录发送到服务器，最终影响数据库
Ext.Ajax.request({
method: "post",
//最好不要用get请求
url: "date2.jsp",//date.jsp
success: function(response, config) {
var json = Ext.util.JSON.decode(response.responseText);
//grid.getStore().reload();
// Ext.Msg.alert("提交成功", json.msg);
},
params: {
data: Ext.util.JSON.encode(jsonArray)
}
});
}
}
}]
});
//删除一行时，同步数据库
grid.getStore().on("remove",
function(s, record, index) {
var jsonArray = [record.data]; //因为Servlet只处理数组，所以先变成数组
if (record.data.ID != "") {
Ext.Ajax.request({
method: "post",
url: "../EditGirdServlet",
params: {
data: Ext.util.JSON.encode(jsonArray),
action: "delete"
},
success: function(response, config) {
var msg = Ext.util.JSON.decode(response.responseText);
//grid.getStore().reload();
Ext.Msg.alert("", msg.msg);
}
});
}
});
//验证是否输入的数据是否有效
var checkBlank = function(modified
/*所有编辑过的和新增的Record*/
) {
var result = true;
Ext.each(modified,
function(record) {
var keys = record.fields.keys; //获取Record的所有名称
Ext.each(keys,
function(name) {
//根据名称获取对应的值
var value = record.data[name];
//找出指定名称所在的列索引
var colIndex = cm.findColumnIndex(name);
//var rowIndex = grid.getStore().indexOfId(record.id);
//根据行列索引找出组件编辑器
var editor = cm.getCellEditor(colIndex).field;
//验证值是否合法
var r = editor.validateValue(value);
if (!r) {
Ext.MessageBox.alert("验证", "对不起，您输入的数据非法");
result = false;
return;
}
});
});
return result;
}
});
</script>
</head>
<body>
<div id="a"></div>
</body>
</html>
date.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@page import="net.sf.ezmorph.bean.MorphDynaBean"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="net.sf.json.JSONObject"%>
<%
String data = request.getParameter("data");
String action = request.getParameter("action");//操作类型
JSONObject a = null;
Object bean = null;
JSONArray array = JSONArray.fromObject(data);
Object[] objArray = array.toArray();
for(Object obj : objArray){
a = JSONObject.fromObject(obj);
System.out.println(a);
bean = a.toBean(a);
//经过查看，发现bean为MorphDynaBean类型
MorphDynaBean morphDynaBean = (MorphDynaBean) bean;
Integer id = (Integer) morphDynaBean.get("ID");
String name = (String) morphDynaBean.get("NAME");
String address = (String) morphDynaBean.get("ADDRESS");
String bank = (String) morphDynaBean.get("BANK");
Boolean isFast = (Boolean) morphDynaBean.get("ISFAST");
String date = (String) morphDynaBean.get("DATE");
System.out.println(id + "\t" + name + "\t" + address + "\t" + bank + "\t" +
isFast + "\t" + date);
}
if("delete".equals(action)){
out.println("{msg: '恭喜，删除的行已同步数据库!'}");
}else{
out.println("{msg: '恭喜，数据修改成功!'}");
}
%>
date2.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="org.json.JSONObject"%>
<%@ page import="org.json.JSONArray"%>
<%
String data = request.getParameter("data");
String action = request.getParameter("action");//操作类型
JSONArray jArray = new JSONArray(data);
for(int i = 0; i < jArray.length(); i++){
// 数组中的一个对象为json对象，也就是jsonObject
JSONObject jsonObj = (JSONObject)jArray.get(i);
// 得到json对象后就可以拿这个对象里所有的属性了。
Integer id = (Integer) jsonObj.get("ID");
String name = (String) jsonObj.get("NAME");
String address = (String) jsonObj.get("ADDRESS");
String bank = (String) jsonObj.get("BANK");
Boolean isFast = (Boolean) jsonObj.get("ISFAST");
String date = (String) jsonObj.get("DATE");
System.out.println(id + "\t" + name + "\t" + address + "\t" + bank + "\t" +isFast + "\t" + date);
}
if("delete".equals(action)){
out.println("{msg: '恭喜，删除的行已同步数据库!'}");
}else{
out.println("{msg: '恭喜，数据修改成功!'}");
}
%>