Ext Grid实现动态表头完整版

  根据项目需要实现动态表头效果，查询了网站的资料，发现写的都不是很详细，也有些不能实现，听网上说可以用Ext.ux.grid.DynamicGridPanel来实现动态表头，可是放在我的项目里面怎么也无法实现，不知道是我人笨，还是这个插件本身就存在问题，没办法，既然插件无法实现，那就只好自己开发咯，静下新来想想，无非就是grid的ColumnModel和store的feilds变换而已，只要动态去后台取，那实现起来应该是没问题，想到这里，立即开发，没法到还真让我实现，呵呵，现在贴出来与各位分享分享，顺便留着记录，代码如下：

实现步骤如下：

1.创建动态表头store需要的field数组需要的java类

public class DynamicFieldsDTO {
  public String name;
  public String type;
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public String getType() {
  return type;
 }
 public void setType(String type) {
  this.type = type;
 }
}

2.创建动态表头ColumnModel需要的columns需要的java类

public class DynamicColumnsDTO {
    public String header;
    public String dataIndex;
    public boolean show;
    public boolean sortable;
    public int width;
   
  public String getHeader() {
   return header;
  }
  public void setHeader(String header) {
   this.header = header;
  }
  public String getDataIndex() {
   return dataIndex;
  }
  public void setDataIndex(String dataIndex) {
   this.dataIndex = dataIndex;
  }
  
  public boolean isShow() {
   return show;
  }
  public void setShow(boolean show) {
   this.show = show;
  }
  public boolean isSortable() {
   return sortable;
  }
  public void setSortable(boolean sortable) {
   this.sortable = sortable;
  }
  public int getWidth() {
   return width;
  }
  public void setWidth(int width) {
   this.width = width;
  }
}

3.创建GetColumnAction类

public class GetColumnAction extends AjaxAction {

 protected Object actionExecute(ActionMapping actionMapping,
   ActionForm actionForm, HttpServletRequest request,
   HttpServletResponse response) throws Exception {

   List achievemens = achievementService.findAllDefined();   //从数据库获取grid显示字段
  
  /***************转换Ext动态表头处理************************/
  List list=new ArrayList();
  List fieldsList=new ArrayList();
  List columnsList=new ArrayList();  
   for (int i = 0; i <achievemens.size(); i++) {
   TkBmAchievementDefine tkBmAchievement =(TkBmAchievementDefine)achievemens.get(i); 
   DynamicFieldsDTO fieldsDto=new DynamicFieldsDTO();
   fieldsDto.setName(tkBmAchievement.getColumns());
   fieldsDto.setType("string");
   fieldsList.add(fieldsDto);
   
   DynamicColumnsDTO columnsDto=new DynamicColumnsDTO();  
   if(tkBmAchievement.getColumns().equals("id")){
         //隐藏某列
   }else{
    columnsDto.setHeader(tkBmAchievement.getName());
    columnsDto.setDataIndex(tkBmAchievement.getColumns());
    columnsDto.setShow(true);
    columnsDto.setSortable(true);
    columnsDto.setWidth(100);
    columnsList.add(columnsDto);
   }
  } 
   
    JSONArray  columnjsonArray =toJson(columnsList);
   JSONArray  fieldsjsonArray =toJson(fieldsList);      //转换成JSON对象
   response.getWriter().write("{columns:"+columnjsonArray+",fields:"+fieldsjsonArray+"}");
   return null;
 }
}

 

4.客户端处理代码如下：

  Ext.onReady(function() {
   Ext.Ajax.request({                            
           url:'getColumn.do',  
           failure:function(){  
               Ext.Msg.alert('信息提示','数据加载异常....');  
           },
     success:function(response){  
      if(response.responseText != null && response.responseText.length != 0){
      var responseArray = Ext.util.JSON.decode(response.responseText);

       var store=new Ext.data.Store({  
           proxy: new Ext.data.HttpProxy({
                      url: 'searchTkBmAchievementImport.do'
     }),
             reader: new Ext.data.JsonReader({  
                root:'list',  
                totalProperty:'Total',  
                remoteSort:false,  
                fields:responseArray.fields 
             })
         });    
       
       var bbt = new Ext.PagingToolbar({
            pageSize:25,
            store: store,
            cls : 'o-toolbar',
            displayInfo: true,
            displayMsg: '当前显示 {0} - {1} 条/ 共 {2} 条',
            emptyMsg: "没有记录"
        }
      ); 
      
         
            var sm=new Ext.grid.CheckboxSelectionModel(); 
             var columntype =new Array() ;
             columntype.push(sm); 
             Ext.each(responseArray.columns,function(h){
               columntype.push({  
                sortable:h.sortable,
                width:h.width,
                 header:h.header,   
                dataIndex:h.dataIndex
             });  
             });  
           
      var cm=new Ext.grid.ColumnModel(columntype);
      var  grid = new Ext.grid.GridPanel({
          stripeRows : true,
          id:'gridId',
          store: store,
          cm: cm,
          sm: sm,
          columnLines: true,
          trackMouseOver:false,
          loadMask: true,
          viewConfig: {
              showPreview:false,
              getRowClass : function(record, rowIndex, p, store){
                  if(this.showPreview){
                      p.body = '<p>'+record.data.excerpt+'</p>';
                      return 'x-grid3-row-expanded';
                  }
                  return 'x-grid3-row-collapsed';
              }
          },
           bbar: bbt,
          width:840,
          height:340,
          autoExplandColumn:1,
          animCollapse: false,
          iconCls: 'icon-grid',
          title: '业绩维护',
          el: 'dynamic'
          }); 

           grid.render();
           store.load({params:{start:0, limit:25}});
           grid.getSelectionModel().selectFirstRow();
          }
         }
         });
  
});

5.创建jsp页面调用js，此处简单不再描述