extjs5 grid如何实现根据后台返回的数据 合并相应的单元格或是行数

Posted 2023-04-29

extjs5 grid如何实现根据后台返回的数据

合并相应的单元格或是行数
如同上面的grid是的
请大家帮忙 着急用

参考技术A 最新版本是Extjs5.0.1，我们可以在官方网站进行下载。（这里不得不提一句，Extjs5到目前为止还没有免费的授权，所以下载到的版本是试用版。）
下载到的压缩包解压以后，你会看到一大堆的文件夹和文件，我们该如何使用Extjs5呢？
之前看到过别人说的通过Sencha CMD创建Extjs5项目，但个人觉得那种方式并不适合我们目前的开发模式。我说做ASP.NET的，需要在ASP.NET MVC或WebForm中使用Extjs，所以绝对不上简单的通过Sencha CMD 生成Extjs5项目那么简单。

[ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel

继上次使用js前端导出excel之后，另一个主要大家比較关注的是后台实现导出excel,由于本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出。

本文文件夹

• • 本文文件夹
    • poi项目下载及载入
    • extjs前端导出设置
    • extjs后台相应的解决方式
      • 创建excel工作簿
      • 创建一个excel页签
      • 生成excel样式并初始化
      • 产生表格标题行build headers
      • 构造数据行build rows

poi项目下载及载入

POI项目是apache官网的一个开源项目，其主要目的是对microsoft的办公软件进行接口封装，让用户能够对其进行编码方式书写。
项目开源网址：Apache POI: http://poi.apache.org/
到写文章的时候，最新版本号是3.1.1。下载bin包 解压缩后将jar包(下面图片中的jar包)增加到项目的lib中：

OK。自己測试一下是否正常增加到项目库中就能够了。

extjs前端导出设置

在前端extjs的grid中增加底部gridtoolbar内容增加一个导出excelbutton，增加处理事件，对处理事件关联到后台action.

exportexyjsGrid: function (grid) {
//关联后台，传入须要的參数
}

extjs后台相应的解决方式

在后台的action处理：

创建excel工作簿

HSSFWorkbook workbook = new HSSFWorkbook();

创建一个excel页签

HSSFSheet sheet = workbook.createSheet("页签标题");

生成excel样式并初始化

HSSFCellStyle style = workbook.createCellStyle();

产生表格标题行（build headers）

    HSSFRow row = sheet.createRow(0);
    for (int i = 0; i < headers.length; i++) {

        HSSFCell cell = row.createCell(i);

        cell.setCellStyle(style);

        HSSFRichTextString text = new HSSFRichTextString(headers[i]);

        cell.setCellValue(text);

    }

构造数据行(build rows)

跟标题行一样 遍历前台传入的grid參数 找到store 过滤參数条件 遍历插入excel数据行并填充数据就可以。

本文主要使用的markdown编辑器功能：
1. 代码高亮
2. 图片上传
3. 标题文件夹