神墓辰东小说_[Ext js]Grid行選擇的多種場(chǎng)景和實(shí)現方式| 成都西華升騰科技有限公司

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

CmsWing

[Ext js]Grid行選擇的多種場(chǎng)景和實(shí)現方式

## Grid行選擇的多種場(chǎng)景和實(shí)現方式
Grid的行選擇有多種實(shí)現方式，可以應用在不同的場(chǎng)景， 本篇介紹三種實(shí)現方式：
使用selModel 實(shí)現
使用 checkcolumn 類(lèi)型的列
使用widgetcolumn 類(lèi)型的列
### 使用selModel 實(shí)現Grid的行方式
Gird行選擇比較習慣的方式是在首列提供提供復選框進(jìn)行選擇， 最簡(jiǎn)單的就是在Grid的定義中增加
selModel:'checkboxmodel', 配置， 該配置的意思是設置Grid的選擇模式為復選框模式， 直接看示例代碼：
```JSON
{      
	xtype: 'grid',  
	title: 'Grid 復選框的選擇模式',      
	selModel:'checkboxmodel',    
	columns: [{       
	text: '姓名',     
	dataIndex: 'name'     
	}, {          
	text: '都城',    
	dataIndex: 'city'  
	}],       
	store: [{ 
	"name": "曹操", 
	"city": "豫州"  
	}, {           
	"name": "劉備", 
	"city": "荊州"  
	}, {           
	"name": "孫權", 
	"city": "揚州"  
	}]    
}
```

以上代碼實(shí)現的效果如下：
![](/upload/picture/2022-10-11/upload_47c8552d1d3cd23c732b1fce284d06b1.png)
該選擇方式使用 Grid 的getSelection()方法就可以獲取選擇的Ext.data.Model類(lèi)型的數組， 該選擇方式的好處有：
實(shí)現簡(jiǎn)單， 不需要額外的列和數據
獲取值很簡(jiǎn)單
可以實(shí)現全選
但是如果需要某些列默認選取的話(huà)，這種方式就比較困難了，可以考慮增加一個(gè)checkcolumn 的列。
### 使用 checkcolumn 類(lèi)型的列
如果某行該列的值是true的話(huà)則默認會(huì )選取， 如果是false 則不會(huì )選取。
示例代碼：
```javascript
{   
	xtype: 'grid',   
	title: '復選框列的選擇模式',  
	columns: [{           
	xtype:'checkcolumn',    
	dataIndex: 'mychecked'       
	},{        
	text: '姓名',    
	dataIndex: 'name'  
	}, {       
	text: '都城',  
	dataIndex: 'city'  
	}],    
	store: [{    
	"name": "曹操",  
	"city": "豫州"      
	}, {        
	"name": "劉備",     
	"city": "荊州"   
	}, {       
	"name": "孫權",    
	"city": "揚州"    
	}]  
}

```
示例效果如下：
![](/upload/picture/2022-10-11/upload_d9f4d45350c90dd47e77e23fc6b76145.png)
Checkbox的選取和Store中某個(gè)屬性的值是綁定的， 如果偵測到改動(dòng)的話(huà)，左上角會(huì )出現一個(gè)紅色的修改標記。
如果該屬性值是true，則Checkbox會(huì )自動(dòng)選取
獲取那些行是否被選取只需要判斷Store中的值即可。
checkcolumn 會(huì )給每一行都增加一個(gè)復選框，但是要實(shí)現復選框根據某些條件決定是否顯示的話(huà)， 雖然column 提供了renderer屬性， 但是這個(gè)配置主要是對值進(jìn)行一些設置，比如修改值得顯示和樣式，對于復選框類(lèi)型，要實(shí)現隱藏還是比較困難， 這時(shí)可以考慮使用widgetcolumn 。
##使用widgetcolumn 類(lèi)型的列
widgetcolumn 類(lèi)型的列可以設置編輯類(lèi)型的組件， 比如復選框，下拉框以及圖表等， 這里實(shí)現復選框代碼如下：
```json
{      
	xtype: 'grid',
	title: '組件列類(lèi)型（widgetcolumn）實(shí)現部分行不出現復選框列的選擇模式',  
	columns: [{  
	xtype:'widgetcolumn',    
	widget: {           
	xtype: 'checkbox',  
	bind: '{record.checked}',  
	listeners:{      
	afterrender:function(thisCheckBox,opt){ 
	var record = thisCheckBox.getWidgetRecord();    
	var show = record.get('showcheckbox');     
	if(!show) thisCheckBox.setHidden(true);         
	}          
	}         
	}    
	},{   
	text: '姓名',        
	dataIndex: 'name'
	}, {     
	text: '都城',      
	dataIndex: 'city'     
	}],      
	store: [{  
	"name": "曹操",     
	"city": "豫州",       
	"showcheckbox":true   
	}, {        
	"name": "劉備",   
	"city": "荊州"    
	}, {         
	"name": "孫權",    
	"city": "揚州",    
	"showcheckbox":true  
	}]    
}
```

代碼示例效果如下：
![](/upload/picture/2022-10-11/upload_d330be9729a44c7447487765b9023a00.png)
上面的示例代碼中， Store中有一個(gè) showcheckbox的屬性，widgetcolumn 中根據該值判斷是否顯示復選框組件。復選框是否選取可以使用其他的屬性判斷。
本篇在線(xiàn)示例
https://osxm.github.io/extjs_dev_ency/#gridselectdemo

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

購物車(chē)

0 ITEMS ON YOUR CART

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

[Ext js]Grid行選擇的多種場(chǎng)景和實(shí)現方式

網(wǎng)站導航