Ext的Grid导出为Excel 方法

easonfans

浏览: 253016 次
性别:
来自: 北京

最近访客更多访客>>

devcang

csdn_lan322

bmladmin

30↑

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs学习

Excel EXT CSS JavaScript Office

转载的一个extjs的grid数据生成excel的好方法，这里面没有选择框，是将grid所有的数据转为excel。可以选择要输出的列，若你想自己选择某些行输出，只要做稍微的改动就可以了。这里面使用了js来调用ActiveX控件来生成Excel。

老外的方法：
GridPanel to real Excel file(Only By IE5+,Windows,Office)

What ?
There is only one static function in the object Ext.ux.Grid2Excel ,
You can use it anywhere to convert the data from a gridpanel to a local real excel file.

Where ?
It use a object(ActiveXObject("Excel.application") to create a real excel file,so it works at only windows platform with the office software installed.And then modifying the settings of the IE security to activate the activex may be necessary too.

How ?
Like this:
Ext.ux.Grid2Excel.Save2Excel(grid);

Core Code List and Demo

grid2excel.js:

/**//**  
 * @author qinjinwei  
 *   
 * time: 2008-7-24 20:28:02  
 */  
var  idTmr  =  "";    
Ext.ux.Grid2Excel = {   
    
Save2Excel : function(grid)   
 {  
  var cm = grid.getColumnModel();  //返回Grid的列模型（ColumnModel）。
  var store = grid.getStore();   
  
  var it = store.data.items;   //数据数组
  var rows = it.length;   //数组的长度
  //初始化excel相关的  ActiveX
  var   oXL   =   new   ActiveXObject("Excel.application");        
  var   oWB   =   oXL.Workbooks.Add();        
  var   oSheet   =   oWB.ActiveSheet;    
  for (var i = 0; i < cm.getColumnCount(); i++) {   
      
   if (!cm.isHidden(i)) { //首先在第一行设置列的名字（那些没有被隐藏的显示）  
    oSheet.Cells(1, i + 1).value = cm.getColumnHeader(i);   
   }   
      
   for (var j = 0; j < rows; j++) {   //写入excel数据，for循环写入
    r = it[j].data;   
    var v = r[cm.getDataIndex(i)];   
    var fld = store.recordType.prototype.fields.get(cm.getDataIndex(i));  //得到对应的数据 
    
    if(fld.type == 'date')   //如果是日期类型的话，那么明确格式
    {   
         v = v.format('Y-m-d');       
       }   
      
    oSheet.Cells(2 + j, i + 1).value = v;   //写入
   }   
  }   
        oXL.DisplayAlerts = false;   
  oXL.Save();   
  oXL.DisplayAlerts = true;                       
  oXL.Quit();   
  oXL = null;   
    idTmr = window.setInterval("Cleanup();",1);   
  }   
};   
function Cleanup() {   
    window.clearInterval(idTmr);   
    CollectGarbage();   
};

Demo : 一个小的实例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
<html>   
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">   
        <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">   
        <script type="text/javascript" src="./ext/adapter/ext/ext-base.js">   
        </script>   
        <script type="text/javascript" src="./ext/ext-all-debug.js">   
        </script>   
        <script type="text/javascript" src="grid2excel.js">   
        </script>   
    </head>   
    <body>   
        <script type="text/javascript">   
            Ext.onReady(function(){   
               
                var myData = [['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am']];   
                   
                var store = new Ext.data.SimpleStore({   
                    fields: [{   
                        name: 'company'  
                    }, {   
                        name: 'price',   
                        type: 'float'  
                    }, {   
                        name: 'change',   
                        type: 'float'  
                    }, {   
                        name: 'pctChange',   
                        type: 'float'  
                    }, {   
                        name: 'lastChange',   
                        type: 'date',   
                        dateFormat: 'n/j h:ia'  
                    }]   
                });   
                store.loadData(myData);   
                   
                // create the Grid   
                var grid = new Ext.grid.GridPanel({   
                    id: 'static-grid',   
                    store: store,   
                    renderTo: 'grid-example',   
                    columns: [{   
                        id: 'company',   
                        header: "Company",   
                        width: 160,   
                        sortable: true,   
                        dataIndex: 'company'  
                    }, {   
                        header: "Price",   
                        width: 75,   
                        sortable: true,   
                        //renderer: 'usMoney',   
                        dataIndex: 'price'  
                    }, {   
                        header: "Change",   
                        width: 75,   
                        sortable: true,   
                        dataIndex: 'change'  
                    }, {   
                        header: "% Change",   
                        width: 75,   
                        sortable: true,   
                        dataIndex: 'pctChange'  
                    }, {   
                        header: "Last Updated",   
                        width: 85,   
                        sortable: true,   
                        renderer: Ext.util.Format.dateRenderer('m/d/Y'),   
                        dataIndex: 'lastChange'  
                    }],   
                    //stripeRows: true,   
                    //autoExpandColumn: 'company',   
                    height: 350,   
                    width: 600,   
                    title: 'Array Grid',   
                    bbar: new Ext.Toolbar({   
                        buttons: [{   
                            text: 'µ¼³öExcel',   
                            tooltip: 'µ¼³öExcel',   
                            handler: onItemClick  
                        }]   
                    })   
                });   
                   
                function onItemClick(item){   
                   
                    Ext.ux.Grid2Excel.Save2Excel(grid);   
                }   
                   
                //grid.render('grid-example');   
                //grid.getSelectionModel().selectFirstRow();   
            });   
        </script>   
        <div id="grid-example">   
        </div>   
    </body>   
</html>

这个我试过了，可用，是个简单易行的好方法。

来源：http://www.cnblogs.com/crazybird/archive/2008/08/13/1267304.html