好多天都在研究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);
}
分享到:
相关推荐
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
ext grid 动态扩展 column动态添加
对ext Grid进行了封装,动态加载数据源,动态生成列
用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助
我的资源不需要积分 EXT2.0 GRID 示例 很实用
Ext4 grid打印,打印预览,复杂表头打印,等等都实现了!
Ext自定义Grid Cell插件,使用此插件可以在Grid空间的Cell单元格中插入指定的控件
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
EXT支持GRID中文排序 主要是重写排序的方法
EXT GRID使用EXT GRID使用 EXT GRID使用EXT GRID使用
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
本例采用PHP,json, sqlite,来显示一个EXT3.0的Grid,需要PHP环境,可以用xampp集成包。 部署后访问http://localhost/ExtSample/employee.php
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
Ext.grid.ColumnModel显示不正常
自己编写的EXT例子,grid、tree从数据库读取数据动态显示,并进行分页。可以动态更换主题,并存入cookies中。
Ext grid panel 滚动条位置不变,适用于实时数据的刷新
支持Ext3 Ext4导出excel,客户端导出表格,支持各种主流浏览器。
ext-grid+json简单应用,可以直接套用... 可以跑的工程.sql脚本...