关于json字符串 (jsonreader,gridpanel,viewport)
写在客户端的代码(把一个从客户端传过来的map对象转换成json字符)
<%
String jsonStr=null;//定义一个空的字符串
Map queryFilterMap = (Map)request.getAttribute("queryFilter");//从服务器上获得的一个map类型的对象
if(queryFilterMap != null){
JSONObject jsonObject=new JSONObject();//生成一个JSONObject类型的对象
Set keySet=queryFilterMap.keySet();//把一个map的对象转换成一个set集合对象
for(Object key:keySet){
Object value=queryFilterMap.get(key);//获得键值
if(value!=null)
jsonObject.put(key,value);//把值不为空的键,值
}
jsonStr=jsonObject.toString();
}
%>
把从数据库中获得的数据转换成一个json字符串(写在服务器上的代码)
JSONArray arrayjson = new JSONArray();//定义一个jsonarray型的对象
for (int i = 0; i < list1.size(); i++) {//list1是从数据库中获得所有对象(docbase)的集合
JSONObject object = new JSONObject();
Docbase docbase = (Docbase) list1.get(i);//list1中的一个对象
object.put("_id", docbase.getId());//把该对象的属性加到jsonobject的对象(object)中
object.put("createdate", docbase.getCreatedate());
object.put("categoryname", categoryname);
object.put("content", contentvalue);
object.put("subject", subject + iconnew);
object.put("objno", docbase.getObjno());
object.put("_parent", parentid);
object.put("creator", creator);
object.put("attachnum", docbase.getAttachnum());
object.put("docstatus", status);
object.put("docstatus", status);
object.put("modifydate", docbase.getModifydate());
object.put("modifytime", docbase.getModifytime());
arrayjson.add(object);
}
JSONObject jsonresult = new JSONObject();
jsonresult.put("success", true);
jsonresult.put("result", arrayjson);
response.getWriter().print(jsonresult.toString());//把json字符串返回给客户端
return;
写在客户端 显示出一个表格如图
写在页面上即客户端的代码
<script >
Ext.LoadMask.prototype.msg='正在加载,请稍候...';
var grid;
var sm=new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn});
Ext.onReady( function()
{
// create the data store
var store = new Ext.ux.maximgb.treegrid.AdjacencyListStore({//这是一个树装(tree)显示
autoLoad : true,
url: '<%=action%>',//获的json字符串的路径 如:action=/ServiceAction/com.eweaver.document.base.servlet.DocbaseAction?action=getdocbaseall在DocbaseAction中if(action.equals("getdocbaseall"))
{
//从服务器上返回过来的json字符串
json字符串的格式为:
{"result":[{"attachnum":0,"docstatus":"正式","categoryname":"管理手册","_parent":null,"content":"摘要","objno":"0000046","modifydate":"2008-07-03","creator":"王红女","_id":"4028d80f1ade2106011ae8211a2a0fa9","createdate":"2008-07-03","subject":"test","_is_leaf":true,"modifytime":"16:54:20"}],"totalCount":1,"success":true}
}
reader: new Ext.data.JsonReader({
id: '_id',//这个绑定的是你在页面上单击一下 所返回个服务器端的值 但在服务器上获得值为request.getparamter("anode");
获得的是你也页面上点击的值
root: 'result',//绑定json字符串中的result
totalProperty: 'totalCount',json字符串中的totalcount一般是绑定从数据库中查询的记录的总数
fields:['_id','_parent','_is_leaf','createdate','subject','objno','creator','attachnum','docstatus','modifydate','content','categoryname','modifytime']
}),//json字符串中的值 也是jsonarray中存放的列名(即数据库中的查询出来的列名)
remoteSort: true(如果你要对整个数据排序而不是排序只对本页面有效时,写的一个条件(它里面封装好了sort这样的一个字段 你在服务器上通过request.getparameter("sort")来获得你要排序的字段 从而来达到整个数据排序 dir 这个字段来显示你是要升序还是降序 (根据你在客户端选择的结果)))
});
//store.setDefaultSort('id', 'desc');//设置数据的ID列默认的排序是降序
// create the Grid
grid = new Ext.ux.maximgb.treegrid.GridPanel({
store: store,
sm:sm,
master_column_id : 'subject',
columns: [ //表头
{id:'subject',header: "标题", width: 75, dataIndex: 'subject'},
{header:"创建日期", width: 85, sortable: true, dataIndex: 'createdate'} ,
{header: "文档编号", width: 75, dataIndex: 'objno'},
{header: "创建者", width: 75, dataIndex: 'creator'},
{header:"附件数", width: 75, dataIndex: 'attachnum'},
{header:"是否正式", width: 75, dataIndex: 'docstatus'},
{header:"分类名", width: 75, dataIndex: 'categoryname'},
{header:"摘要", width: 75, dataIndex: 'content'},
{ header:"修改日期", width: 85, sortable: true,dataIndex:'modifydate'},
{ header:"修改时间", width: 85, dataIndex:'modifytime'} ],
stripeRows: true,
autoExpandColumn: 'subject',
loadMask: true,//页面加载时显示出来的一个加载....
viewConfig: {
forceFit:true,
enableRowBody:true,
sortAscText:'升序',
sortDescText:'降序',
columnsText:'列定义',
getRowClass : function(record, rowIndex, p, store){
return 'x-grid3-row-collapsed';
}
},
tbar: [Ext.get('divSearch').dom.innerHTML],
bbar: new Ext.ux.maximgb.treegrid.PagingToolbar({
store: store,
displayInfo: true,
beforePageText:"第",
afterPageText:"页/{0}",
firstText:"第一页",
prevText:"上页",
nextText:"下页",
lastText:"最后页",
refreshText:"刷新",
displayMsg: '显示 {0} - {1}条记录 / {2}',
emptyMsg: "没有结果返回",
//paramNames:{start:"start",limit:"limit",paged:"paged"},其中limit 表示每一页显示的大小
pageSize: <%=pageSize%>
})
});
store.baseParams=<%=(jsonStr==null?"{}":jsonStr)%>//其中jsonstr是客户端上的一个json字符串 当发送到服务器上时,就换成了单个的参数 你在
服务器上可以这样接受 如:假如jsonstr中包含一个交 creator的参数 并且有值 在服务器端 可以通过request.getparameter("creator")获得creator的值
store.load({params:{start:0, limit:<%=pageSize%>},paged:""}); 其中limit是分页中 每一页的大小
var vp = new Ext.Viewport({//页面的布局显示 如果在代码中有此代码 则不要在页面上写一div层的id来绑定gridpanel中的属性renderto的值
layout : 'fit',
items : grid
});
grid.getSelectionModel().selectFirstRow();
});
}
}
}
);
sm.on('rowselect',function(selMdl,rowIndex,rec ){
var reqid=rec.get('requestid');
for(var i=0;i<selected.length;i++){
if(reqid ==selected[i]){
return;
}
}
selected.push(reqid)
}
);
sm.on('rowdeselect',function(selMdl,rowIndex,rec){
var reqid=rec.get('requestid');
for(var i=0;i<selected.length;i++){
if(reqid ==selected[i]){
selected.pop(reqid)
return;
}
}
}
);
<%}%>
});
</script>