extjs单元格合并

EXTJS单元格合并 EXTJS单元格合并是指在EXTJS GridPanel中实现单元格合并的功能。单元格合并可以使得GridPanel中的数据显示更加简洁和清晰。下面将详细介绍EXTJS单元格合并的实现方法。 一、加入CSS样式 在实现单元格合并时，需要加入相应的CSS样式以便控制GridPanel中的样式。下面是相关的CSS代码： ``` /*rowspan grid 合并行效果*/ .rowspan-grid .x-grid3-body .x-grid3-row { border: none; cursor: default; width: 100%; } .rowspan-grid .x-grid3-header .x-grid3-cell { /*border-left: 2px solid transparent;*/ /*ie6 的 transparent 下显示黑色?*/ border-left: 2px solid #fff; } .rowspan-grid .x-grid3-body .x-grid3-row { overflow: hidden; border-right: 1px solid #ccc; } .rowspan-grid .x-grid3-body .x-grid3-cell { border: 1px solid #ccc; border-top: none; border-right: none; } .rowspan-grid .x-grid3-body .x-grid3-cell-first { /*border-left: 1px solid transparent;*/ border-left: 1px solid #fff; } .rowspan-grid .x-grid3-body .rowspan-unborder { /*border-bottom: 1px solid transparent;*/ border-bottom: 1px solid #fff; } .rowspan-grid .x-grid3-body .rowspan { border-bottom: 1px solid #ccc; } ``` 二、引入Ext.ux.grid.RowspanView对象 在实现单元格合并时，还需要引入Ext.ux.grid.RowspanView对象，该对象继承自Ext.grid.GridView，实现了单元格合并的功能。下面是相关的Java代码： ``` Ext.ns('Ext.ux.grid'); / * 实现 grid 的 rowspan 效果 * @author: tipx.iteye.com */ Ext.ux.grid.RowspanView = Ext.extend(Ext.grid.GridView, { constructor: function(conf) { Ext.ux.grid.RowspanView.superclass.constructor.call(this, conf); }, // private // 清除合并的行中，非第一行的数据 cleanRenderer: function(column, value, metaData, record, rowIndex, colIndex, store) { var rowspan = column.rowspan; if (!Ext.isEmpty(rowspan) && rowspan !== 0) { if (rowIndex % rowspan !== 0) { return ''; } } return column.renderer(value, metaData, record, rowIndex, colIndex, store); } }); ``` 三、配置 GridPanel 在配置GridPanel时，需要设置view属性为Ext.ux.grid.RowspanView对象，并将cls属性设置为'rowspan-grid'。同时，还需要在列模型中配置合并行的列，例如： ``` { dataIndex: 'xxx', header: 'xxx', rowspan: 3 } //该列每三行合并一行 ``` EXTJS单元格合并可以通过加入CSS样式、引入Ext.ux.grid.RowspanView对象和配置GridPanel来实现。这样可以使得GridPanel中的数据显示更加简洁和清晰。