首页 > 代码库 > extjs 4合并单元行
extjs 4合并单元行
[html]
view plain
copy
print
?
- 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>
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 =http://www.mamicode.com/== store.getAt(i).get(‘industry‘)) {>
在做报表时经常会有这样的需求就是对一个维度或者多个维度相同的值只显示一次并合并起来的需求,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‘
/////////////////////////////
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。