[Ext JS] Group Grid-分组网格| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS] Group Grid-分组网格

## [Ext JS] Group Grid-分组网格
### 分组网格及其效果
![](/upload/picture/2022-10-09/upload_5560c6ad12b3391e542c2e9dd8606574.png)
分组Grid， 是以数据中的某一个属性对数据进行分组， 以上图为例， 对三国的武将列表以国家进行分组。
分组Grid的效果是：
每个分组会新增一行组的显示
该分组的属性一般不需要以列进行显示
### 分组网格的实现
Ext JS 原生就提供了分组网格的实现， 实现方式是通过Grid的features 进行配置。以上面的示例效果为例， 代码片段如下：
```javascript
xtype:'grid',
columns: [{text: '武将名',dataIndex: 'name',flex:1},
{text: '等级',dataIndex: 'rank',flex:1}],
store:Ext.create('Ext.data.Store', {
fields: ['name', 'rank', 'country'],
groupField: 'country',
data:[{name:'关羽',rank:'上将',country:'蜀国'},  
{name:'张飞',rank:'上将',country:'蜀国'},  
{name:'典韦',rank:'上将',country:'魏国'},   
{name:'许楮',rank:'上将',country:'魏国'}] 
}),     
features: [{ftype:'grouping'}]
```

分组网格使用grouping 的 feature 实现，该Feature对应的类是： Ext.grid.feature.Grouping
分组网格需要在Grid和Store同时进行配置， 在Grid中配置features， 在store 中需要配置分组的字段groupField
### 分组栏的显示
默认分组栏的显示是： 分组属性名: 属性值， 比如上面的 country:蜀国。
该显示也可以通过eature 的groupHeaderTpl进行自定义。
比如：
```javascript
features: [{         
	ftype: 'grouping',    
	groupHeaderTpl: '{name}:{rows.length}' 
}]
```

大括号{} 的部分是可以使用的变量。
常用的额变量有：
{columnName} 分组属性名
{name} - 分组属性值
{rows.length} 某分组包含的行数
### 更改分组属性
在页面上也可以动态修改分组属性， 在列的下拉菜单中选择 Group by this field， 如下图所示：
![](/upload/picture/2022-10-09/upload_d3ac27600b1744147a5a1203bf3892f7.png)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS] Group Grid-分组网格

网站导航