有声_[Ext JS] Group Grid-分組網(wǎng)格| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS] Group Grid-分組網(wǎng)格

## [Ext JS] Group Grid-分組網(wǎng)格
### 分組網(wǎng)格及其效果
![](/upload/picture/2022-10-09/upload_5560c6ad12b3391e542c2e9dd8606574.png)
分組Grid， 是以數據中的某一個(gè)屬性對數據進(jìn)行分組， 以上圖為例， 對三國的武將列表以國家進(jìn)行分組。
分組Grid的效果是：
每個(gè)分組會(huì )新增一行組的顯示
該分組的屬性一般不需要以列進(jìn)行顯示
### 分組網(wǎng)格的實(shí)現
Ext JS 原生就提供了分組網(wǎng)格的實(shí)現， 實(shí)現方式是通過(guò)Grid的features 進(jìn)行配置。以上面的示例效果為例， 代碼片段如下：
```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:'關(guān)羽',rank:'上將',country:'蜀國'},  
{name:'張飛',rank:'上將',country:'蜀國'},  
{name:'典韋',rank:'上將',country:'魏國'},   
{name:'許楮',rank:'上將',country:'魏國'}] 
}),     
features: [{ftype:'grouping'}]
```

分組網(wǎng)格使用grouping 的 feature 實(shí)現，該Feature對應的類(lèi)是： Ext.grid.feature.Grouping
分組網(wǎng)格需要在Grid和Store同時(shí)進(jìn)行配置， 在Grid中配置features， 在store 中需要配置分組的字段groupField
### 分組欄的顯示
默認分組欄的顯示是： 分組屬性名: 屬性值， 比如上面的 country:蜀國。
該顯示也可以通過(guò)eature 的groupHeaderTpl進(jìn)行自定義。
比如：
```javascript
features: [{         
	ftype: 'grouping',    
	groupHeaderTpl: '{name}:{rows.length}' 
}]
```

大括號{} 的部分是可以使用的變量。
常用的額變量有：
{columnName} 分組屬性名
{name} - 分組屬性值
{rows.length} 某分組包含的行數
### 更改分組屬性
在頁(yè)面上也可以動(dòng)態(tài)修改分組屬性， 在列的下拉菜單中選擇 Group by this field， 如下圖所示：
![](/upload/picture/2022-10-09/upload_d3ac27600b1744147a5a1203bf3892f7.png)

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS] Group Grid-分組網(wǎng)格

網(wǎng)站導航