Ext4原生grid的导出控件

来源：互联网发布：玉兔miki吴玉淘宝编辑：程序博客网时间：2024/06/04 18:01

前言：导出建议在后端进行,避免一些兼容性问题。

本文借鉴网络上的一个js包,在此基础上稍微完善了些，并添加了即将扩展和完善的东西，今后会逐步完善它。

使用样例:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>Excel导出(前端)</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="plugs/ext4.2/resources/css/ext-all.css"><script type="text/javascript" src="plugs/ext4.2/ext-all-dev.js"></script><script type="text/javascript" src="public/util/Exporter2Excel-all.js"></script>    <script type="text/javascript">         Ext.onReady(function(){                 var store =  Ext.create('Ext.data.Store', {    fields:['id','name', 'email', 'phone'],    data:{'items':[        { id:'0', 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },        { id:'1', 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },        { id:'2',  'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },        { id:'3',  'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },        { id:'4',  'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },        { id:'5',  'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },        { id:'6',  'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },        { id:'7',  'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },        { id:'8',  'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },        { id:'9',  'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },        { id:'10',  'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },        { id:'11',  'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },        { id:'12',  'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }    ]},    proxy: {        type: 'memory',        reader: {            type: 'json',            root: 'items'        }    }});var nameStore = Ext.create('Ext.data.Store',{            fields:['name', 'id'],    data:[{'id': 'Lisa',  "name":"汉字111111"},        {'id': 'Bart',  "name":"汉字222222"},        {'id': 'Homer', "name":"汉字333333"},        {'id': 'Marge',  "name":"汉字555555"}]});var nameCom = Ext.create('Ext.form.field.ComboBox',{            store:nameStore,            queryMode: 'local',    displayField: 'name',    valueField: 'id'});var gridPanel = Ext.create('Ext.grid.Panel', {            border:false,    store: store,    columns: [    {text:'ID',dataIndex:'id',hidden:true},        { text: '姓名',  dataIndex: 'name' ,renderer:function(value){            nameCom.setValue(value);            return nameCom.getRawValue(); }},        { text: '邮件', dataIndex: 'email', flex: 1 },        { text: '手机号码', dataIndex: 'phone' }    ]});                  var pagePanel = Ext.create('Ext.panel.Panel',{         title: 'Simpsons',         height:'100%',         width:'100%',         tbar:[{         text:'导出',         handler:function(){              window.location = getExcelUrl.getExcelUrl(gridPanel, "表格导出");         }         }],         layout:'fit',         border:false,         items:[gridPanel],         renderTo: Ext.getBody()         });                                    });                                   <%--              --%>        </script>  </head>    <body>     </body></html>

界面效果:

实际导出效果:

资源下载：http://download.csdn.net/detail/xiaohan1990718/6735001 样例即上面例子。

0 0