利用Ext grid显示前台数据，然后把前台数据进行Excel表导出

 

http://blog.csdn.net/yixiaotian1988/article/details/6275256

近期在做一个项目，项目的要求是：

利用Ext grid显示前台数据，然后把前台数据进行Excel表导出，再导出报表的时候要求：

1、要把grid数据显示的表头信息导入Excel表

2、在导出Excle表的时候，可以进行选择，是进行勾选的导出，还是批量导出（勾选导出，根据勾选的记录导出，批量导出，全部导出），

3、在进行批量导出的时候，是分页显示还是显示成一页（sheet标签，在Excel表中用）

首先，我们先准备数据，创建grid并把数据填充进去，这里我就不再多说，不是本文的重点：

但需要说明的是，在进行store准备数据的时候，我们要保证命名的规范性，为接下来的利用java反射取得数据打下基础，

 

 

接下来根据要求，我们设计一个按钮，当点击按钮的时候，弹出一个窗口，即上图中的图片，为我们提供选择

还有就是要得到grid数据的表头信息

关键代码：strBuffer为我们自己重写的StringBuffer类

 for(var j=2; j<columns.getColumnCount(); j++){    
              strBuffer1.append(columns.getColumnHeader(j));   /*得到所有列头信息并放入StringBuffer中*/
              strBuffer1.append(",");       /*添加分隔符*/
  }

那为什么我们要在每一个字段之后加上一个“，”号呢？这里我们把数据传递到后台做准备的，这样我们就只需要把一个字符串传递到后台中，然后再在后台中利用java的split方法把数据再提取出来

得到勾选的数据的编号，即数据在数据库的id号，我们也是利用字符串向后台进行传递：

for(var k=2; k<columns.getColumnCount(); k++){    
                                  strBuffer2.append(columns.getDataIndex(k));   /*得到所有列头信息并放入StringBuffer中*/
                                  strBuffer2.append(",");       /*添加分隔符*/
 }

 

 

已经把前台的各项数据都已经得到，那么就需要向后台来传递啦！！

这里我们是做出了一个Ext的一个简单的弹出窗口来实现的，如第一个图中，

这里我们是利用Ext.form的submit()方式进行的提交，在这里一定要注意是submit()方式，而不能是Ajax，这与我们后面的弹出导出Excel的窗口是紧密相连的，关键代码：

  var f = new Ext.FormPanel({
              frame:true,
              layout:"form",
              buttonAlign:'center',
              onSubmit: Ext.emptyFn,
              submit: function() {
                      this.getEl().dom.action= url;
                      this.getEl().dom.method = 'post',
                      this.getEl().dom.submit(),
                      win.close()
              },

           …………

 

   var btnSubmit = new Ext.Button({
               text: "提交",
               handler: function(){
                        f.getForm().submit();
               }
    });   

 

以这种方式提交，并不是真正的Ajax，而是类似于普通Html的表单提交方式，

看后台代码如何来解析从前台获得的数据：

        String empStr = request.getParameter("headers");   //拆分字符串得到表头信息
        if(!"".equals(empStr) && null!= empStr){
            String str1 = empStr.substring(0, empStr.length()-1);
            headers = str1.split(",");
        }

 

这样就把前台的数据传递到后台，然后就是进行流的输入输出，生成Excel:关键代码如下

WritableWorkbook wwb = Workbook.createWorkbook(os);

for (int j = 0; j < title.length; j++) {// 开始写入第一行(即标题栏)
            Label label = null;       // 用于写入文本内容到工作表中去
            label = new Label(j, 0, title[j]);  // 在Label对象的构造中指明单元格位置(参数依次代表列数、行数、内容 )
            sheet.setColumnView(j, 30);   // 将定义好的单元格添加到工作表中
            sheet.addCell(label);
        }
       
        for (int row = 0; row < empList.size(); row++) {  // 开始写入内容
            List list = (List) empList.get(row);   // 获取一条(一行)记录
            for (int col = 0; col < list.size(); col++) {  // 数据是文本时(用label写入到工作表中)
                String listvalue = (String) list.get(col).toString();
                Label label = null;
                label = new Label(col, row + 1, listvalue);
                sheet.addCell(label);
            }
        }

 

然后就是弹出窗口，提示用户进行“打开”或者是“保存”啦！！

        OutputStream out = null;
        InputStream in = null;
        // 获得文件名
        String filename = URLEncoder.encode(file.getName(), "UTF-8");
        // 定义输出类型(下载)
        response.setContentType("application/force-download");
        response.setHeader("Location", filename);

        // 定义输出文件头
        response.setHeader("Content-Disposition", "attachment;filename="
                + filename);
        out = response.getOutputStream();
        in = new FileInputStream(file.getPath());

        byte[] buffer = new byte[1024];
        int i = -1;
        while ((i = in.read(buffer)) != -1) {
            out.write(buffer, 0, i);
        }

        in.close();
        out.flush();
        out.close();
       
        if (isDel) {
            // 删除文件,删除前关闭所有的Stream.
            file.delete();
        }

 

然后就会弹出窗口：

 

至此，我们的工作基本完成！！！

部分关键代码已经在我的资源里，可以进行下载！！！