Grid导出为Excel方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
转载的一个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" "<a
href="/TR/html4/strict.dtd">/TR/html4/strict.dtd</a> ">
<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: '¦Ì?3?Excel',
tooltip: '¦Ì?3?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>。