!强烈的跪求!Extjs grid的内容打印和导出EXECl解决方案
日期：2014-05-16 浏览次数：20704 次
!!!强烈的跪求!!!Extjs grid的内容打印和导出EXECl
强烈的跪求!Extjs grid的内容打印和导出execl
我正在学习Extjs现在利用,Extjs 的grid完好的显示出传给页面的json数据.源码如下,现在迫切需要解决,打印grid内容和导出grid内容为execl文件的方法!!
代码是最简单的表格页面
谢谢
Ext.onReady(function(){
var data1 = <%=str1%>;
var ds1 = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(data1),
reader: new Ext.data.JsonReader({},[
{name:'nsrsbh'}
])
});
var cm1 = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header:'XXX',dataIndex:'nsrsbh'}
]);
cm1.defaultSortable = true;
var pagingBar = new Ext.PagingToolbar({
pageSize: 25,
store: ds1,
displayInfo: true,
displayMsg: '本页显示数据范围 {0} - {1} of {2}',
emptyMsg: "没有数据",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
var grid1 = new Ext.grid.GridPanel(
{
renderTo:'grid1',
autoSizeColumns:true,
frame:true,
title:"XXX",
width:750,
height:400,
cm:cm1,
store:ds1,
bbar: pagingBar
});
// render it
grid1.render();
// trigger the data store load
ds1.load({params:{start:0, limit:25}});
});
</script>
</head>
<body>
<div id="grid1"></div>
</body>
</html>
------解决方案--------------------
下面的函数,只需要传递要下载数据的grid即可
此函数下载grid的数据时,如果grid中某些字段被隐藏,则不会下载
因此,可以让用户自定义下载时需要的列
提供给楼主参考一下
注意:要允许ACTIVEX控件的运行,要不EXCEL无法打开,就不行了.
//---------------------------
//下载指定视图中的数据到EXCEL中
function downloadViewData(grid)
{
try {
var xls = new ActiveXObject ("Excel.Application");
}
catch(e) {
alert( "要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。 请点击【帮助】了解浏览器设置方法！");
return "";
}
xls.visible =true; //设置excel为可见
var xlBook = xls.Workbooks.Add;
var xlSheet = xlBook.Worksheets(1);
var cm = grid.getColumnModel();
var colCount = cm.getColumnCount();
var temp_obj = [];
//只下载没有隐藏的列(isHidden()为true表示隐藏,其他都为显示)
//临时数组,存放所有当前显示列的下标
for(i=0;i<colCount;i++){
if(cm.isHidden(i) == true){
}else{
temp_obj.push(i);
}
}
for(i=1;i<=temp_obj.length;i++){
//显示列的列标题
xlSheet.Cells(1,i).Value = cm.getColumnHeader(temp_obj[i - 1]);
}
var store = grid.getStore();
var recordCount = store.getCount();
var view = grid.getView();
for(i=1;i<=recordCount;i++){
for(j=1;j<=temp_obj.length;j++){
//EXCEL数据从第二行开始,故row = i + 1;
xlSheet.Cells(i + 1,j).Value = view.getCell(i - 1,temp_obj[j - 1]).innerText;
}
}
xlSheet.Columns.AutoFit;
xls.ActiveWindow.Zoom = 75
xls.UserControl = true; //很重要,不能省略,不然会出问题 意思是excel交由用户控制
xls=null;
xlBook=null;
xlSheet=null;
}
-----
强烈的跪求!Extjs grid的内容打印和导出execl
我正在学习Extjs现在利用,Extjs 的grid完好的显示出传给页面的json数据.源码如下,现在迫切需要解决,打印grid内容和导出grid内容为execl文件的方法!!
代码是最简单的表格页面
谢谢
Ext.onReady(function(){
var data1 = <%=str1%>;
var ds1 = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(data1),
reader: new Ext.data.JsonReader({},[
{name:'nsrsbh'}
])
});
var cm1 = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header:'XXX',dataIndex:'nsrsbh'}
]);
cm1.defaultSortable = true;
var pagingBar = new Ext.PagingToolbar({
pageSize: 25,
store: ds1,
displayInfo: true,
displayMsg: '本页显示数据范围 {0} - {1} of {2}',
emptyMsg: "没有数据",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
var grid1 = new Ext.grid.GridPanel(
{
renderTo:'grid1',
autoSizeColumns:true,
frame:true,
title:"XXX",
width:750,
height:400,
cm:cm1,
store:ds1,
bbar: pagingBar
});
// render it
grid1.render();
// trigger the data store load
ds1.load({params:{start:0, limit:25}});
});
</script>
</head>
<body>
<div id="grid1"></div>
</body>
</html>
------解决方案--------------------
下面的函数,只需要传递要下载数据的grid即可
此函数下载grid的数据时,如果grid中某些字段被隐藏,则不会下载
因此,可以让用户自定义下载时需要的列
提供给楼主参考一下
注意:要允许ACTIVEX控件的运行,要不EXCEL无法打开,就不行了.
//---------------------------
//下载指定视图中的数据到EXCEL中
function downloadViewData(grid)
{
try {
var xls = new ActiveXObject ("Excel.Application");
}
catch(e) {
alert( "要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。 请点击【帮助】了解浏览器设置方法！");
return "";
}
xls.visible =true; //设置excel为可见
var xlBook = xls.Workbooks.Add;
var xlSheet = xlBook.Worksheets(1);
var cm = grid.getColumnModel();
var colCount = cm.getColumnCount();
var temp_obj = [];
//只下载没有隐藏的列(isHidden()为true表示隐藏,其他都为显示)
//临时数组,存放所有当前显示列的下标
for(i=0;i<colCount;i++){
if(cm.isHidden(i) == true){
}else{
temp_obj.push(i);
}
}
for(i=1;i<=temp_obj.length;i++){
//显示列的列标题
xlSheet.Cells(1,i).Value = cm.getColumnHeader(temp_obj[i - 1]);
}
var store = grid.getStore();
var recordCount = store.getCount();
var view = grid.getView();
for(i=1;i<=recordCount;i++){
for(j=1;j<=temp_obj.length;j++){
//EXCEL数据从第二行开始,故row = i + 1;
xlSheet.Cells(i + 1,j).Value = view.getCell(i - 1,temp_obj[j - 1]).innerText;
}
}
xlSheet.Columns.AutoFit;
xls.ActiveWindow.Zoom = 75
xls.UserControl = true; //很重要,不能省略,不然会出问题 意思是excel交由用户控制
xls=null;
xlBook=null;
xlSheet=null;
}
-----
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
