+ -
当前位置:首页 → 问答吧 → ext grid 动态列

ext grid 动态列

时间:2010-10-11

来源:互联网

js代码:
Ext.onReady(function() {
//声明函数变量 
  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:"getHJTJYLB.asp", 
  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(p,p); 
  } 
  } 
  //动态生成GridPanel 
  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; 
  var fields = eval('([' + data.fields + '])'); 
  var newStore = new Ext.data.Store 
  ({ 
  proxy:new Ext.data.HttpProxy({url:"getHJTJYLB.asp"}), 
  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,
store : store,
region : 'center',
margins : '0 5 5 5',
frame : true, // 表格外加边框
columnLines : true,
clicksToEdit : 1,
trackMouseOver : false,
// padding:"10px",
/*viewConfig : {
forceFit : true
},*/
enableHdMenu : false
}); 
}; 


});
***********************************************

js 代码其中的var res = Ext.util.JSON.decode(response.responseText);
这句话要怎么样格式返回来,不太清楚

后台的代码要怎么样写,以下我写的,但是觉得不太清楚,这样写对不对,还需要指点一下
public String getDYnamicColName(String szAdmDeptID,String szDeptLevel) throws Exception
{
Connection DBConn = null;
ConnPool cp = null;
String Json="";
try
{
cp = new ConnPool();
DBConn = cp.getConnection();
if (DBConn == null)
{
System.out.println("Failed in getting Connection!");
return null;
}
String sql = "select row_number() over(order by deptid ) as rm,deptname from jnhb_dept where admdeptid='10001' and deptlevel='3' ";
Statement statement = DBConn.createStatement();
statement.execute(sql);
ResultSet rs = statement.getResultSet();

JSONObject str=new JSONObject();
str.put("totalCount","1");

while(rs.next())
{
JSONArray columns = new JSONArray();
JSONObject columnsStr=new JSONObject();
columnsStr.put("header", rs.getString("deptname"));
columnsStr.put("dataIndex",rs.getInt("rs"));
columnsStr.put("width",80);
columnsStr.put("sortable","true");
columns.add(columnsStr);
str.put("columns",columns);
 
JSONArray fields = new JSONArray();
JSONObject fieldsStr=new JSONObject();
fieldsStr.put("name", rs.getInt("rs"));
fields.add(fieldsStr);
str.put("fields",fields);
}
rs.close();
statement.close();
return(Json);
}
catch (Exception e)
{
zqLog.writeDebug("Failed in JN_NYXHAction.getDataInfo!");
e.printStackTrace();
return (null);
}
finally
{
if (DBConn != null) cp.closeConnection();
}
}

作者: hanbingdi   发布时间: 2010-10-11

grid 动态列有现成的方法,在store.load 时候,后台返回东西里多带一个metaData就ok,
api 的JsonReader 上有例子,

JScript code
{
    metaData: { // 就是加这个 metaData
        "root": "rows",
        "fields": [
            {"name": "name"},
            {"name": "job"}
        ]
    },
...
    colModel: ....// 这里加上这个,在store.on('metachange'  时候用到
    // Reader's configured root
    // (this data simulates 2 results per page)
    "rows": [ // *Note: this must be an Array
        { "id": 1, "name": "Bill", "occupation": "Gardener" },
        { "id": 2, "name":  "Ben", "occupation": "Horticulturalist" }
    ]
}


然后给store注册metachange事件
JScript code
grid.store.addListener('metachange', function(store, meta){
    var cm = grid.getColumnModel();
       cm.setConfig(meta.colModel);
       grid.reconfigure(store, cm);
},this);

作者: aj3423   发布时间: 2010-10-11