北漂一族

     动态列的实现，关键点在于怎么在后台传送数据到前台，在前台如何去组装数据，组装列模型。在加载列数据的时候，是通过Ajax异步处理，那就是要先加载列头，然后再加载列值数据。那我们可以通过两个请求分别处理列头和列值，一个请求用来，从数据库将所有的列头信息返回。一个请求用来获得列值数据。得到的列头的信息也是通过Ajax返回到前台。

    后台处理：

//用單獨的一個action請求獲取列頭的信息
public void getColumnHead(){
try{
//得到列头信息
List<TMatter> matterList = this.getTrendsService().selectMatter();

StringBuffer buf = new StringBuffer();
buf.append(“[{");
//固定列,直接字符串拼接
buf.append("'图标':'image',");
buf.append("'商品编号':'goodsID',");
buf.append("'款号':'styleID',");

//动态列，从数据库查询出来的列
for(int i = 0; i < matterList.size(); i ++){
TMatter matter = matterList.get(i);
buf.append("'"+matter.getMattername()+"':'");
buf.append(matter.getMatterid()+"',");
}
buf.append("'销售单价':'salePrice',");
buf.append("'销售数量':'saleNum',");
buf.append("'小计':'saleSubTotal'");
buf.append("}]“);

// System.out.println(buf.toString());

// OutPrint.print(“[{'公司码':'193','季节':'194','大类':'195'}]“);

OutPrint.print(buf.toString()); //返回到前台
OutPrint.print(true);
}catch(Exception ex){
ex.printStackTrace();
}
}

//得到列值信息
public void getColumnData(){
try{
List<TMatter> matterList = this.getTrendsService().selectMatter();
int count = 2;
StringBuffer buf = new StringBuffer();
//test
for(int i = 0; i < 3; i ++){
buf.append(“{‘商品编号’:'”+i+”‘,”);
buf.append(“‘款号’:'”+(i+1)+”‘,”);
buf.append(“‘大类’:'裙子’},”);
}

// String jsonList = “{‘商品编号’:'1223232432432′,’款号’:'XXL’,'大类’:'上着’},” +
// “{‘商品编号’:'5845254451′,’款号’:'XXL001′,’大类’:'裙子’}”;
// String json = “{totalPorperty:” + count + “,result:[" + jsonList + "]}”;

String json = “{totalPorperty:” + count + “,result:[" + buf.substring(0,buf.length()-1) + "]}”;
System.out.println(json);
OutPrint.print(json);
OutPrint.print(true);
}catch(Exception ex){
ex.printStackTrace();
}
}

前台js处理，返回的数据在js页面进行组装。

Ext.onReady(function()
{
//声明函数变量
var data;

//动态添加列，这是关键代码
//(自定义js类对象addColumn)
function addColumn()
{
this.fields = ”; //属性
this.columns = ”;
this.addColumns=function(name,caption) //添加列的方法
{
//alert(“fields = “+this.fields);
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:120,sortable:true}’;
};

};
//从服务器端获取列，然后动态添加到ColumnModel中
Ext.Ajax.request
({
url:”trends_getColumnHead.action“, //请求得到列头数据
success:function(response,option)
{
if(response.responseText==”")
{
return;
}
data = new addColumn(); //new一个对象

var res = Ext.util.JSON.decode(response.responseText);
// alert(response.responseText);

for(var i=0;i<res.length;i++)
{

for(var p in res[i])
{
data.addColumns(p,p); //将返回的列数据添加到列中
}
}
//动态生成GridPanel
makeGrid();
},
failure:function()
{
Ext.Msg.alert(“消息”,”初始化数据出错”);
}
});
//动态生成GridPanel
function makeGrid()
{
var cm = new Ext.grid.ColumnModel(eval(‘([' + data.columns + '])’)); //将列集合数据添加到列模型中
cm.defaultSortable = true;
var fields = eval(‘([' + data.fields + '])’);
var newStore = new Ext.data.Store
({
proxy:new Ext.data.HttpProxy({url:”trends_getColumnData.action”}), //读取列数据
reader:new Ext.data.JsonReader({totalProperty:”totalPorperty”,root:”result”,fields:fields})
});

newStore.load({params:{start:0,limit:9}});
var pagingBar = new Ext.PagingToolbar
({
displayInfo:true,
emptyMsg:”没有数据显示”,
displayMsg:”显示从{0}条数据到{1}条数据，共{2}条数据”,
store:newStore,
pageSize:9
});
var gridPanel = new Ext.grid.GridPanel
({
title:”动态生成ColumnModel”,
cm:cm,
id:”grid_panel”,
renderTo:”trends”,
store:newStore,
frame:true,
border:true,
layout:”fit”,
pageSize:16,
autoWidth:true,
autoHeight:true,
viewConfig:{forceFit:true},
bbar:pagingBar
});
};
});

这里是通过两个action请求，分别请求得到列头和列值，也可以通过一个action请求。

本文来自:北漂一族[http://www.nanbianhz.com]
转载请注明详细出处:http://www.nanbianhz.com/gridpanel.htm