好多天都在研究Ext 动态grid 的写法.之前一直用到都是静态的.
下面是动态的js代码
function QueryString() { var name,value,i; var str=location.href; var num=str.indexOf("?") str=str.substr(num+1); var arrtmp=str.split("&"); for(i=0;i < arrtmp.length;i++){ num=arrtmp[i].indexOf("="); if(num>0){ name=arrtmp[i].substring(0,num); value=arrtmp[i].substr(num+1); this[name]=value; } } } Ext.onReady(function(){ var fm = Ext.form; var Request=new QueryString(); var ID="";//Request["wlid"]; // //声明函数变量 var data; //动态添加列 var addColumn=function(){ this.fields=''; this.columns=''; this.addColumns=function(name,caption){ if(this.fields.length>0){ this.fields+=','; } if(this.columns.length>0){ this.columns+=','; } this.fields+='{name:"'+name+'"}'; this.columns+='{header:"'+caption+'",dataIndex:"'+name+'",width:80,sortable:true}'; }; }; //从服务器端获取列,然后动态添加到ColumnModel中 Ext.Ajax.request({ url:getRootPath()+'servlet/CommonServlet?change=aaa', success:function(response){ if(response.responseText==""){ return; } data=new addColumn(); var res=Ext.util.JSON.decode(response.responseText); for(var i=0;i<res.length;i++){ for(var p in res[i]){ data.addColumns(res[i][p],p); } } makeGrid(); }, failure:function(){ Ext.Msg.alert("消息","查询出错---->请打开数据库查看数据表名字是否正确"); } }); //动态生成GridPanel var makeGrid = function(){ var cm=new Ext.grid.ColumnModel(eval('(['+data.columns+'])')); //new Ext.grid.RowNumberer;//自动显示行号 cm.defaultSortable=true; cm.on("sss","ss"); var fields=eval('(['+data.fields+'])'); var newStore=new Ext.data.Store({ proxy:new Ext.data.HttpProxy({url:getRootPath()+'servlet/CommonServlet?change=bbb'}), reader:new Ext.data.JsonReader({totalProperty:'totalPorperty',root:'root',fields:fields}) }); newStore.load(); var gridPanel=new Ext.grid.GridPanel({ align : 'center', width : Ext.get("UserBody").getWidth(), height : Ext.get("UserBody").getHeight() - 100, cm : cm, renderTo: 'UserBody', store : newStore, height:300, region : 'center', //margins : '0 5 5 5', frame : false, // 表格外加边框 //columnLines : true, //clicksToEdit : 1, //trackMouseOver : false, //enableHdMenu : false, viewConfig:{ forceFit:true,//所有列都改变宽度 autoFill:true, sortAscText:'升序', sortDescText:'降序', columnsText:'显示列' } }); } });
后台的数据类型
if("aaa".equals(change)){
Map<String, Object> map1 = new HashMap<String, Object>();
map1.put("客户物料编号", "goodsId");//客户物料编号
map1.put("物料编号","goodsCode");//物料编号
map1.put("物料简称", "goodsName");//物料简称
map1.put("物料简称1", "goodsName1");//物料简称
map1.put("物料简称2", "goodsName2");//物料简称
map1.put("物料简称3", "goodsName3");//物料简称
map1.put("物料简称4", "goodsName4");//物料简称
map1.put("物料简称5", "goodsName5");//物料简称
array.put(map1);
out.print(array);
}
if("bbb".equals(change)){
for(int i=1;i<100;i++){
Map<String, Object> map1 = new HashMap<String, Object>();
map1.put("goodsName", "ccc");//物料简称
map1.put("goodsCode","bbb");//物料编号
map1.put("goodsId", "aaa");//客户物料编号
map1.put("goodsName1", "ccc1");//物料简称
map1.put("goodsName2", "ccc2");//物料简称
map1.put("goodsName3", "ccc3");//物料简称
map1.put("goodsName4", "ccc4");//物料简称
map1.put("goodsName5", "ccc5");//物料简称
array.put(map1);
}
try {
json.put("root", array);
json.put("totalPorperty", 3);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println(json);
out.print(json);
}