extjs 4合并单元行

[html]
view plain
copy
print
?

  1. GridPanel row spanning (well, sort of...)
  2. The current GridPanel implementation doesn‘t support row spanning, because the rows aren‘t part of the same table.
  3. The only thing you can do is make the grid look like it has row spanning by changing the css.
  4. Example:
  5. Code:
  6. <style type="text/css">
  7. .grid-row-span .x-grid3-row {
  8. border-bottom: 0;
  9. }
  10. .grid-row-span .x-grid3-col {
  11. border-bottom: 1px solid #ededed;
  12. }
  13. .grid-row-span .row-span {
  14. border-bottom: 1px solid #fff;
  15. }
  16. .grid-row-span .row-span-first {
  17. position: relative;
  18. }
  19. .grid-row-span .row-span-first .x-grid3-cell-inner {
  20. position: absolute;
  21. }
  22. .grid-row-span .row-span-last {
  23. border-bottom: 1px solid #ededed;
  24. }
  25. </style>
  26. <script type="text/javascript">
  27. Ext.onReady(function(){
  28. new Ext.Viewport({
  29. layout: ‘fit‘,
  30. items: {
  31. xtype: ‘grid‘,
  32. store: new Ext.data.ArrayStore({
  33. fields: [
  34. {name: ‘company‘},
  35. {name: ‘price‘, type: ‘float‘},
  36. {name: ‘change‘, type: ‘float‘},
  37. {name: ‘pctChange‘, type: ‘float‘},
  38. {name: ‘lastChange‘, type: ‘date‘, dateFormat: ‘n/j h:ia‘},
  39. {name: ‘industry‘}
  40. ],
  41. data: [
  42. [‘3m Co‘,71.72,0.02,0.03,‘4/2 12:00am‘, ‘Manufacturing‘],
  43. [‘Alcoa Inc‘,29.01,0.42,1.47,‘4/1 12:00am‘, ‘Manufacturing‘],
  44. [‘Altria Group Inc‘,83.81,0.28,0.34,‘4/3 12:00am‘, ‘Manufacturing‘],
  45. [‘American Express Company‘,52.55,0.01,0.02,‘4/8 12:00am‘, ‘Finance‘],
  46. [‘American International Group, Inc.‘,64.13,0.31,0.49,‘4/1 12:00am‘, ‘Services‘],
  47. [‘AT&T Inc.‘,31.61,-0.48,-1.54,‘4/8 12:00am‘, ‘Services‘],
  48. [‘Boeing Co.‘,75.43,0.53,0.71,‘4/8 12:00am‘, ‘Manufacturing‘],
  49. [‘Caterpillar Inc.‘,67.27,0.92,1.39,‘4/1 12:00am‘, ‘Services‘],
  50. [‘Citigroup, Inc.‘,49.37,0.02,0.04,‘4/4 12:00am‘, ‘Finance‘],
  51. [‘E.I. du Pont de Nemours and Company‘,40.48,0.51,1.28,‘4/1 12:00am‘, ‘Manufacturing‘],
  52. [‘Exxon Mobil Corp‘,68.1,-0.43,-0.64,‘4/3 12:00am‘, ‘Manufacturing‘],
  53. [‘General Electric Company‘,34.14,-0.08,-0.23,‘4/3 12:00am‘, ‘Manufacturing‘],
  54. [‘General Motors Corporation‘,30.27,1.09,3.74,‘4/3 12:00am‘, ‘Automotive‘],
  55. [‘Hewlett-Packard Co.‘,36.53,-0.03,-0.08,‘4/3 12:00am‘, ‘Computer‘],
  56. [‘Honeywell Intl Inc‘,38.77,0.05,0.13,‘4/3 12:00am‘, ‘Manufacturing‘],
  57. [‘Intel Corporation‘,19.88,0.31,1.58,‘4/2 12:00am‘, ‘Computer‘],
  58. [‘International Business Machines‘,81.41,0.44,0.54,‘4/1 12:00am‘, ‘Computer‘],
  59. [‘Johnson & Johnson‘,64.72,0.06,0.09,‘4/2 12:00am‘, ‘Medical‘],
  60. [‘JP Morgan & Chase & Co‘,45.73,0.07,0.15,‘4/2 12:00am‘, ‘Finance‘],
  61. [‘McDonald\‘s Corporation‘,36.76,0.86,2.40,‘4/2 12:00am‘, ‘Food‘],
  62. [‘Merck & Co., Inc.‘,40.96,0.41,1.01,‘4/2 12:00am‘, ‘Medical‘],
  63. [‘Microsoft Corporation‘,25.84,0.14,0.54,‘4/2 12:00am‘, ‘Computer‘],
  64. [‘Pfizer Inc‘,27.96,0.4,1.45,‘4/8 12:00am‘, ‘Services‘, ‘Medical‘],
  65. [‘The Coca-Cola Company‘,45.07,0.26,0.58,‘4/1 12:00am‘, ‘Food‘],
  66. [‘The Home Depot, Inc.‘,34.64,0.35,1.02,‘4/8 12:00am‘, ‘Retail‘],
  67. [‘The Procter & Gamble Company‘,61.91,0.01,0.02,‘4/1 12:00am‘, ‘Manufacturing‘],
  68. [‘United Technologies Corporation‘,63.26,0.55,0.88,‘4/1 12:00am‘, ‘Computer‘],
  69. [‘Verizon Communications‘,35.57,0.39,1.11,‘4/3 12:00am‘, ‘Services‘],
  70. [‘Wal-Mart Stores, Inc.‘,45.45,0.73,1.63,‘4/3 12:00am‘, ‘Retail‘],
  71. [‘Walt Disney Company (The) (Holding Company)‘,29.89,0.24,0.81,‘4/1 12:00am‘, ‘Services‘]
  72. ],
  73. sortInfo: {
  74. field: ‘industry‘,
  75. direction: ‘ASC‘
  76. }
  77. }),
  78. cls: ‘grid-row-span‘,
  79. columns: [
  80. {header: "Industry", width: 200, sortable: true, renderer: function (value, meta, record, rowIndex, colIndex, store) {
  81. var first = !rowIndex || value !== store.getAt(rowIndex - 1).get(‘industry‘),
  82. last = rowIndex >= store.getCount() - 1 || value !== store.getAt(rowIndex + 1).get(‘industry‘);
  83. meta.css += ‘row-span‘ + (first ? ‘ row-span-first‘ : ‘‘) + (last ? ‘ row-span-last‘ : ‘‘);
  84. if (first) {
  85. var i = rowIndex + 1;
  86. while (i < store.getCount() && value === store.getAt(i).get(‘industry‘)) {
  87. i++;
  88. }
  89. var rowHeight = 20, padding = 6,
  90. height = (rowHeight * (i - rowIndex) - padding) + ‘px‘;
  91. meta.attr = ‘style="height:‘ + height + ‘;line-height:‘ + height + ‘;"‘;
  92. }
  93. return first ? value : ‘‘;
  94. }, dataIndex: ‘industry‘},
  95. {header: "Company", width: 300, sortable: true, dataIndex: ‘company‘},
  96. {header: "Price", width: 100, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: ‘price‘},
  97. {header: "Change", width: 100, sortable: true, dataIndex: ‘change‘, renderer: Ext.util.Format.usMoney},
  98. {header: "Last Updated", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer(‘m/d/Y‘), dataIndex: ‘lastChange‘}
  99. ],
  100. columnLines: true
  101. }
  102. });
  103. });
  104. </script>
GridPanel row spanning (well, sort of...)
    The current GridPanel implementation doesn‘t support row spanning, because the rows aren‘t part of the same table.
    The only thing you can do is make the grid look like it has row spanning by changing the css.
    Example:
    Code:

<style type="text/css">
.grid-row-span .x-grid3-row {
    border-bottom: 0;
}
.grid-row-span .x-grid3-col {
    border-bottom: 1px solid #ededed;
}
.grid-row-span .row-span {
    border-bottom: 1px solid #fff;
}
.grid-row-span .row-span-first {
    position: relative;
}
.grid-row-span .row-span-first .x-grid3-cell-inner {
    position: absolute;
}
.grid-row-span .row-span-last {
    border-bottom: 1px solid #ededed;
}
</style>
<script type="text/javascript">

Ext.onReady(function(){
    new Ext.Viewport({
        layout: ‘fit‘,
        items: {
            xtype: ‘grid‘,
            store: new Ext.data.ArrayStore({
                fields: [
                   {name: ‘company‘},
                   {name: ‘price‘, type: ‘float‘},
                   {name: ‘change‘, type: ‘float‘},
                   {name: ‘pctChange‘, type: ‘float‘},
                   {name: ‘lastChange‘, type: ‘date‘, dateFormat: ‘n/j h:ia‘},
                   {name: ‘industry‘}
                ],
                data: [
                    [‘3m Co‘,71.72,0.02,0.03,‘4/2 12:00am‘, ‘Manufacturing‘],
                    [‘Alcoa Inc‘,29.01,0.42,1.47,‘4/1 12:00am‘, ‘Manufacturing‘],
                    [‘Altria Group Inc‘,83.81,0.28,0.34,‘4/3 12:00am‘, ‘Manufacturing‘],
                    [‘American Express Company‘,52.55,0.01,0.02,‘4/8 12:00am‘, ‘Finance‘],
                    [‘American International Group, Inc.‘,64.13,0.31,0.49,‘4/1 12:00am‘, ‘Services‘],
                    [‘AT&T Inc.‘,31.61,-0.48,-1.54,‘4/8 12:00am‘, ‘Services‘],
                    [‘Boeing Co.‘,75.43,0.53,0.71,‘4/8 12:00am‘, ‘Manufacturing‘],
                    [‘Caterpillar Inc.‘,67.27,0.92,1.39,‘4/1 12:00am‘, ‘Services‘],
                    [‘Citigroup, Inc.‘,49.37,0.02,0.04,‘4/4 12:00am‘, ‘Finance‘],
                    [‘E.I. du Pont de Nemours and Company‘,40.48,0.51,1.28,‘4/1 12:00am‘, ‘Manufacturing‘],
                    [‘Exxon Mobil Corp‘,68.1,-0.43,-0.64,‘4/3 12:00am‘, ‘Manufacturing‘],
                    [‘General Electric Company‘,34.14,-0.08,-0.23,‘4/3 12:00am‘, ‘Manufacturing‘],
                    [‘General Motors Corporation‘,30.27,1.09,3.74,‘4/3 12:00am‘, ‘Automotive‘],
                    [‘Hewlett-Packard Co.‘,36.53,-0.03,-0.08,‘4/3 12:00am‘, ‘Computer‘],
                    [‘Honeywell Intl Inc‘,38.77,0.05,0.13,‘4/3 12:00am‘, ‘Manufacturing‘],
                    [‘Intel Corporation‘,19.88,0.31,1.58,‘4/2 12:00am‘, ‘Computer‘],
                    [‘International Business Machines‘,81.41,0.44,0.54,‘4/1 12:00am‘, ‘Computer‘],
                    [‘Johnson & Johnson‘,64.72,0.06,0.09,‘4/2 12:00am‘, ‘Medical‘],
                    [‘JP Morgan & Chase & Co‘,45.73,0.07,0.15,‘4/2 12:00am‘, ‘Finance‘],
                    [‘McDonald\‘s Corporation‘,36.76,0.86,2.40,‘4/2 12:00am‘, ‘Food‘],
                    [‘Merck & Co., Inc.‘,40.96,0.41,1.01,‘4/2 12:00am‘, ‘Medical‘],
                    [‘Microsoft Corporation‘,25.84,0.14,0.54,‘4/2 12:00am‘, ‘Computer‘],
                    [‘Pfizer Inc‘,27.96,0.4,1.45,‘4/8 12:00am‘, ‘Services‘, ‘Medical‘],
                    [‘The Coca-Cola Company‘,45.07,0.26,0.58,‘4/1 12:00am‘, ‘Food‘],
                    [‘The Home Depot, Inc.‘,34.64,0.35,1.02,‘4/8 12:00am‘, ‘Retail‘],
                    [‘The Procter & Gamble Company‘,61.91,0.01,0.02,‘4/1 12:00am‘, ‘Manufacturing‘],
                    [‘United Technologies Corporation‘,63.26,0.55,0.88,‘4/1 12:00am‘, ‘Computer‘],
                    [‘Verizon Communications‘,35.57,0.39,1.11,‘4/3 12:00am‘, ‘Services‘],
                    [‘Wal-Mart Stores, Inc.‘,45.45,0.73,1.63,‘4/3 12:00am‘, ‘Retail‘],
                    [‘Walt Disney Company (The) (Holding Company)‘,29.89,0.24,0.81,‘4/1 12:00am‘, ‘Services‘]
                ],
                sortInfo: {
                    field: ‘industry‘,
                    direction: ‘ASC‘
                }
            }),
            cls: ‘grid-row-span‘,
            columns: [
                {header: "Industry", width: 200, sortable: true, renderer: function (value, meta, record, rowIndex, colIndex, store) {
                    var first = !rowIndex || value !== store.getAt(rowIndex - 1).get(‘industry‘),
                        last = rowIndex >= store.getCount() - 1 || value !== store.getAt(rowIndex + 1).get(‘industry‘);
                    meta.css += ‘row-span‘ + (first ? ‘ row-span-first‘ : ‘‘) +  (last ? ‘ row-span-last‘ : ‘‘);
                    if (first) {
                        var i = rowIndex + 1;
                        while (i < store.getCount() && value === store.getAt(i).get(‘industry‘)) {
                            i++;
                        }
                        var rowHeight = 20, padding = 6,
                            height = (rowHeight * (i - rowIndex) - padding) + ‘px‘;
                        meta.attr = ‘style="height:‘ + height + ‘;line-height:‘ + height + ‘;"‘;
                    }
                    return first ? value : ‘‘;
                }, dataIndex: ‘industry‘},
                {header: "Company", width: 300, sortable: true, dataIndex: ‘company‘},
                {header: "Price", width: 100, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: ‘price‘},
                {header: "Change", width: 100, sortable: true, dataIndex: ‘change‘, renderer: Ext.util.Format.usMoney},
                {header: "Last Updated", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer(‘m/d/Y‘), dataIndex: ‘lastChange‘}
            ],
            columnLines: true
        }
    });
});
</script>

在做报表时经常会有这样的需求就是对一个维度或者多个维度相同的值只显示一次并合并起来的需求，Extjs grid默认不带这样的功能，需要我们自己通过变通的方式实现，在其官网上有人给出了下面的解决方案，虽然有一些缺陷（不居中显示），但是还是勉强能实现功能，看了代码实现发现他是一列值一列值进行合并的，如果要合并几列相同的值就无能为力了，思考了一下决定采取变通方式：将要合并的几列值作为一个键值，对于键值相同的行则不再显示，于是就有了下面的实现，当然这里仍然没办法居中

{header: "日期", width: 100, sortable: true, renderer: function (value, meta, record, rowIndex, colIndex, store) {

if(rowIndex>0){
return store.getAt(rowIndex - 1).get(‘key‘)!=store.getAt(rowIndex).get(‘key‘) ? value : ‘‘;
}else{
return value;
}
}, dataIndex: ‘publishdate‘

/////////////////////////////

extjs 4合并单元行

时间： 2024-10-10 08:47:11

extjs 4合并单元行的相关文章

Extjs gridpanel 合并单元格

1 /* 2 * *合并单元格的函数,合并表格内所有连续的具有相同值的单元格.调用方法示例: 3 * *store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","FbillNumber");}); 4 * *参数:grid-需要合并的表格,rowOrC

GRIDVIEW多行多列合并单元格（合并列）

GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 两篇文章:  GridView多行多列合并单元格(完整代码和例子)和 GridView多行多列合并单元格(指定列合并).今天继续再添加一些功能,首先看下图: 左边是原始数据的显示,右边是应用合并列之后的效果. 从图中可以看到,二级指标有两列,有的行中两列的内容一样,有的则不一样,如果实现如右图所示,看起来效果会更好一些.下面就着手实现这个功能,我的实现原理很简单,就是遍历GridV

【转】C# DataTable 导出 Excel 进阶 多行表头、合并单元格、中文文件名乱码

本文原创地址:http://blog.csdn.net/ranbolwb/article/details/8083983 ,转载请保留本行. 本例子是上一篇 DataTable 导出 Excel 的进阶,除了上一篇提到的处理乱码问题,本例还添加了处理多行表头.合并单元格的功能及处理中文文件名乱码问题,应该可以满足日常开发的需要了. 废话不多说了,直接上代码: [C#] 可以写单独类 1 using System; 2 using System.Collections.Generic; 3 usi

C# Excel行高、列宽、合并单元格、单元格边框线、冻结

private _Workbook _workBook = null;private Worksheet _workSheet = null;private Excel.Application _excelApplicatin = null; _excelApplicatin = new Excel.Application();_excelApplicatin.Visible = true;_excelApplicatin.DisplayAlerts = true; _workBook = _e

DataGridView合并单元格（多行多列合并）

一.点击在拖入的显示控件(TreeList)右上方的箭头,在Treelist任务中选择数据源,添加项目数据源,依次选择数据库.数据集,新建连接,浏览选择数据库(*.mdb),依次点击 下一步,选择“表”,完成. 二.具体代码如下: #region"合并单元格(多行多列)" //需要(行.列)合并的所有列标题名 List<String> colsHeaderText_V = new List<String>(); List<String> colsHe

poi获取合并单元格内的第一行第一列的值

当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: 1 import java.io.FileInputStream; 2 import java.io.FileNotFoundException; 3 import java.io.IOException; 4 5 import org.apache.poi.hssf.usermodel.HSSFWorkbook; 6 import org.apache.poi.ss.

poi导出excel合并单元格(包括列合并、行合并)

1 工程所需jar包如下:commons-codec-1.5.jarcommons-logging-1.1.jarlog4j-1.2.13.jarjunit-3.8.1.jarpoi-3.9-20121203.jar 2 Code: /** * 导出设备信息Excel * @param form 和 HTTP 请求相关的表格对象 * @param resources 信息资源对象 * @param locale 本地化对象 * @param session HTTP 会话对象 * @param

java 解析excel，带合并单元的excel

首先,mavn导入jar包 <!-- 解析excel需要导入的 jar包    begin -->          <dependency>            <groupId>org.apache.poi</groupId>            <artifactId>poi</artifactId>            <version>3.11</version>        </dep

转:java 解析excel，带合并单元的excel

收集了一些对博主有帮助的博文,如下 >>>>>>>>>>>第一部分: 首先,mavn导入jar包 <!-- 解析excel需要导入的 jar包    begin -->          <dependency>            <groupId>org.apache.poi</groupId>            <artifactId>poi</artifactI